javascript - 如何在自定义 Polymer Web 元素中查询动态注入(inject)的光子元素？

Question

我正在尝试查询自定义元素的子元素，该元素使用内容标签作为其子元素的注入(inject)点。

<dom-module id="content-element">
  <template>

    <content id="content"></content>

  </template>
  <script>
    Polymer({

      [...],

      attached: function() {
        console.log(this.queryAllEffectiveChildren('div'));

        // console.log(this.children);
      }
    });
  </script>
</dom-module>

它的父级生成一个适当的元素，然后将其附加到 content-element 中。

<dom-module id="parent-element">
  <template>

    <content-element></content-element>

  </template>
  <script>
    Polymer({

      [...],

      ready: function() {
        var newEl = document.createElement('div');
        Polymer.dom(this.root).querySelector('content-element').appendChild(newEl);
      }
    });
  </script>
</dom-module>

当我检查 DOM 时，div 将按预期出现在 content-element 内部。问题是当 attached 方法被执行时，它返回一个空的 HTML 集合。我知道 content-element 有 child 。如果我在相同的 attached 方法中 console.log(this.children)，我将获得一个包含 div 的 HTML 集合。我还注意到，如果我对 div 进行“硬编码”，查询有效子项将生成包含该 div 的 HTML 集合。

<content-element>
  <div></div>
</content-element>

查询有效子项的能力很重要，因为附加的 div 数量会增加，我需要能够按类过滤它们。

this.queryAllEffectiveChildren('.red-divs-only');

使用 this.children 是不可能的，因为 HTML 集合不像数组那样是可编辑的。

更新

如果我将一个名为 addElement 的公共(public)方法添加到 content-element，它会附加一个由父级传递给它的元素，我可以使用 queryAllEffectiveChildren()。但是，我不明白为什么这种方法有效而另一种方法无效。

<dom-module id="content-element">
  <template>

    <content id="content"></content>

  </template>
  <script>
    Polymer({

      [...],

      addElement: function(el) {
        Polymer.dom(this).appendChild(el);
      },

      attached: function() {
        console.log(this.queryAllEffectiveChildren('div'));
      }
    });
  </script>
</dom-module>

<dom-module id="parent-element">
  <template>

    <content-element></content-element>

  </template>
  <script>
    Polymer({

      [...],

      ready: function() {
        var newEl = document.createElement('div');
        var conEl = Polymer.dom(this.root).querySelector('content-element');

        conEl.addElement(newEl);
      }
    });
  </script>
</dom-module>

Answer 1

这个问题的答案在于 child 被附加到哪里。

Polymer.dom(this.root).querySelector('content-element') 以本地根为目标，这不是应该附加子项以用于内容标签的位置。

相反，应该按照 Polymer 文档中列出的说明将子项附加到 light dom。这可以通过将节点传递给公共(public)方法来完成，元素可以在该方法中将节点附加到自身:

addElement: function(el) {
  Polymer.dom(this).appendChild(el);
}

此外，light DOM 可以直接定位:

var newEl = document.createElement('div');
var conEl = Polymer.dom(this.querySelector('content-element')).appendChild(newEl);

遵循其中一种方法将允许轻型 DOM Polymer 方法使用内容标签与元素的子元素正确交互。