polymer : this. $[elementId] 未定义

Question

这是一个简单的 polymer 元素，它只使用其 id 和 this.$.[elementId] 访问内部元素。 ，然后记录下来。运行，这段简单的代码，你就能看到返回的元素undefined .为什么？

<dom-module id="custom-element">
  <template>
          <template is="dom-if" if="[[condition]]">
             <div id="main"></div>
          </template>
  </template>

  <script>
    class CustomElement extends Polymer.Element {
      static get is() { return "custom-element"; }
            static get properties() {
                return {
                   condition : Boolean
                };
            }

            ready(){
                super.ready();
                console.log(this.$.main); // logs "undefined"
            }
    }
    
    customElements.define(CustomElement.is, CustomElement);
  </script>

</dom-module>

Answer 1

polymer this.$仅引用元素 来自本地 DOM 不是动态添加的。因此，放置在里面的元素 dom-if或 dom-repeat模板未添加到 this.$对象 .
如果你想选择一个动态元素，你需要去 dom 并使用类似 this.shadowRoot.querySelector('#main') 的东西。

这是摆脱这个问题的解决方案。在您的 ready() 中添加以下代码:

if (this.$)
    this.$ = new Proxy(this.$, {
        get: ($, id) => $[id] || this.shadowRoot.getElementById(id),
        set: ($, id, element) => {
            $[id] = element;
            return true;
        }
    });