如何在自定义 Polymer Web 元素中查询动态注入的光 children？

Question

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

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

它的 parent 生成一个合适的元素，然后将其附加到 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 方法被执行时，它 returns 一个空的 HTML 集合。不过我知道 content-element 有 children。如果我在相同的 attached 方法中 console.log(this.children)，我将得到一个 HTML 集合，其中包含 div。我还注意到，如果我 'hard code' div，查询有效的 children 将产生一个包含 div.

的 HTML 集合

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

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

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

这将无法使用 this.children，因为 HTML 集合不像数组那样可编辑。

更新

如果我将一个名为 addElement 的 public 方法添加到 content-element，它会附加一个由 parent 传递给它的元素，我能够得到结果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

这个问题的答案在于追加子项的位置。

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

相反，应该按照 Polymer 文档中列出的说明将子级附加到灯 dom。这可以通过将节点传递给 public 方法来完成，其中元素可以将节点附加到自身：

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

另外，灯DOM可以直接瞄准：

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

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

如何在自定义 Polymer Web 元素中查询动态注入的光 children？

How can I query dynamically injected light children in a custom Polymer web element?

html

javascript

polymer

polymer-1.0

更新