如何访问自定义元素内的 dom-if 内容？

在自定义元素中我想访问span并向其附加一个子项，但所有常用的访问器都会给出undefined:

<template>
    <template is="dom-if" if="[[condition]]" restamp>
        <span id="myspan"></span>
    </template>
</template>

 ready() {
   var a = this.$.myspan;                     //<------- is undefined
   var b = this.$$.myspan;                    //<------- is undefined
   var c = document.getElementById("myspan"); //<------- is undefined
   var d = this.$$("#myspan");                //<------- is undefined
}

如何访问span在这种情况下？

更新：这里是plunk

这在没有 setTimeout 或 this.async 的生命周期回调中不起作用的原因是，在附加元素后，dom-if 模板尚未呈现。附加元素后，Polymer 会调用附加的回调。然而，当在 dom-if 上设置该值时，观察者会运行并消除其自己的 _render 函数。 debounce 会等待一段时间来捕获对其的任何其他调用，然后执行 ._render 函数并将元素附加到 DOM。换句话说，当附加的回调运行时，通常 dom-if 模板尚未呈现。

这种去抖的原因是性能。如果在很短的时间内进行了多次更改，当我们关心的结果是最终结果时，这种去抖动会阻止模板多次渲染。

幸运的是，dom-if 提供了 .render() 方法，允许您使其同步渲染。您需要做的就是向您的 dom-if 添加一个 id，切换到附加的回调并像这样调用：

<template>
    <template id="someDomIf" is="dom-if" if="[[condition]]" restamp>
        <span id="myspan"></span>
    </template>
</template>

 attached() {
   this.$.someDomIf.render();
   var c = document.getElementById("myspan"); //<------- should be defined
   var d = this.$$("#myspan");                //<------- should be defined
}

在 dom-if 上触发同步渲染不应该是一个巨大的性能问题，因为幸运的是你的元素应该只被附加一次。Edit:当它转动时，这even在就绪回调中工作：

<template>
    <template id="someDomIf" is="dom-if" if="[[condition]]" restamp>
        <span id="myspan"></span>
    </template>
</template>

 ready() {
   this.$.someDomIf.render();
   var c = document.getElementById("myspan"); //<------- should be defined
   var d = this.$$("#myspan");                //<------- should be defined
}

看看你的笨蛋的这个叉子：http://plnkr.co/edit/u3richtnt4COpEfx1CSN?p=preview