Polymer 聚合物：此。$[elementId]未定义

这是一个简单的聚合元素，它只需使用内部元素的id和这个$[elementId]访问内部元素，然后记录它。运行这个简单的代码，您将能够看到返回的元素未定义。为什么?

此.$仅引用本地DOM中未动态添加的元素。因此，放置在dom if或dom repeat模板中的元素不会添加到this.$对象中

如果您希望选择一个动态元素，您需要转到dom并使用如下内容。shadowRoot.querySelector'main'

这里有一个解决这个问题的方法。在ready中添加以下代码：

---

这似乎对我来说不适用于dom中的元素，如果在Polymer 2中。如果我将元素移出dom If，它将返回结果，但当它们在dom If中时则不会。这正是我在回答中所说的^^

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

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