javascript - 访问 Polymer 中的所有内部元素？

Question

我有:

<k-myelement>
    <k-anotherelement></k-anotherelement>
</k-myelement>

当我这样定义模板时:

<polymer-element name="k-myelement">
    <template>
        <content select="k-anotherelement" id="anotherelement"></content>
    </template>
</polymere-element>

我可以使用 this.$['anotherelement'] 访问内部元素

但是使用这种方法我必须预先定义可以使用哪些内部元素。

我想要的是一种模板技术，它允许我访问所有内部元素。

Answer 1

<content> ( insertion points ) 用于在 Shadow DOM 中的特定位置渲染 light DOM 中的元素。使用 <content select="k-anotherelement"></content>说“在这里渲染任何 <k-anotherelement> 元素。如果你想邀请所有轻型 DOM 节点加入渲染派对，只需使用 <content></<content> 即可。

您的代码段的其他问题:

• 需要在<polymer-element>上定义元素的名称, 不像 <template name="k-myelement">

• 获取通过<content>的节点列表, 使用 content.getDistributedNodes() .您可能还需要考虑是否需要 <content> .可以使用 .children 访问 Light DOM 子节点和其他访问者。来自 the Polymer docs :

  For a <content>, you can iterate through content.getDistributedNodes() to get the list of nodes distributed at the insertion point.

  In Polymer, the best place to call this method is in the attached() callback so you’re guaranteed that the element is in the DOM tree.

  Also remember that you can access the light DOM as the element’s normal children (i.e. this.children, or other accessors). The difference with this approach is that it’s the entire set of potentially distributed nodes; not those actually distributed.