Polymer 如果在自定义元素中，如何访问dom的内容？

在自定义元素中，我想访问

span

并向其附加一个子元素，但所有常用的访问器都给出

未定义的
：

<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
}


就绪（）{
var a=this.$.myspan；//尝试在附加的方法中异步执行此操作，如下所示，此方法有效：

attached: function(){
   this.async(function(){
     var d = this.$$("#myspan"); 
     console.log(d); 
   },someTimeIfThereAreManyItemsToLoad);
}

在没有setTimeout或this.async的情况下，这在生命周期回调中不起作用的原因是，在附加元素之后，dom if模板尚未呈现。在附加元素时，Polymer调用附加回调。但是，当在dom if上设置该值时，观察者运行并取消其自身的_呈现函数解Bounce等待一段时间来捕获对它的任何其他调用，然后执行._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
}


附（{
这是$.someDomIf.render（）；
var c=document.getElementById（“myspan”）；//上述回答仅在您的初始条件为真时有效。请参阅我对您的初始问题的答案，从而得出以下问题：

不确定是否应该混合使用狗的.render内容，但我仍然认为观测者应该是合适的位置，因为如果条件最初为false，它将不起作用。
如聚合物文档中所示：

注意：使用数据绑定动态创建的节点（包括
dom repeat
和
dom if
模板中的节点）不会添加到
this.$
哈希中。哈希仅包括静态创建的本地dom节点（即在元素最外层模板中定义的节点）

您需要使用
this.$$（“#yourlementId”）
当
条件
为
真
时，最后一个应该可以工作，当
条件
为
假
时，没有一个可以工作。@Günter Zöchbauer，不工作，这里有一个证据：如果
的话，聚合物需要一些额外的时间来处理
dom。这可以工作
This.async（函数（）{console.log（'This.$（“#myspan”），这个。$（“#myspan”）；}
（与弗拉维奥·奥乔亚的回答相同）。即使没有时间加载多个项目，它也能工作。知道为什么它在ready（）中不工作吗？以及如何确保这个。$（“#myspan”）即使“有很多项目要加载”也能工作“@31415926查看下面我的答案。有一种方法可以在附加的回调中完成，而不使用this.async。这个答案非常粗糙？如果我在486机器上运行（可以这么说）？我认为@Dogs似乎走在正确的轨道上-但是我还没有对
.render（）是否
是真正同步的。@zerodevx基于dom if源，应该是。根据以下对话，$.someDomIf.render（）；不保证myspan元素已准备就绪…@3141526这不是他们讨论的问题。他们正在讨论您在未使用.render（）的情况下遇到的问题；在正常情况下，本地dom在准备就绪之前进行初始化，但这并不意味着dom if已经呈现了它的子项。这就是.render（）调用的目的：同步呈现模板，而不是异步呈现模板，以确保在需要时呈现模板。
This。$.someDomIf.render（）；
仅当且仅当条件为truthy@HariPrasad正确。如果条件为假，则无需渲染。
<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
}