Polymer get元素带有条件模板

Question

我的聚合物成分中有以下模板

<polymer-element name="my-element" attributes="show">
  <template if={{show}}>
     <select id="conditional-select">
     </select>
  </template>
<script>
Polymer({
    showChanged: function () {
        console.log(this.$['conditional-select']); //undefined
        setTimeout(function(){
           console.log(this.$['conditional-select']); //got it!
        },1000)
    }
})
</script>
</polymer-element>

为什么显示的第一个控制台输出始终undefined已更改？ 我明白，DOM元素尚未在showChanged内呈现，但如何正确等待呢？

Answer 1

看起来填充this.$需要花费一点时间，因此showChanged中的更改会为我工作

showChanged: function () {
    this.async(function() {
        console.log(this.$['conditional-select']); //undefined
        console.log(this.shadowRoot
            .querySelector('#conditional-select')); //got it!!                
    }.bind(this));
}