访问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中的特定位置渲染轻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：

    

  对于<content>，您可以遍历content.getDistributedNodes()以获取在插入点分发的节点列表。

       

  在Polymer中，调用此方法的最佳位置是attached()回调，因此可以保证元素位于DOM树中。

       

  还要记住，您可以将light DOM作为元素的普通子元素（即this.children或其他访问者）访问。与此方法的不同之处在于它是整个可能分布的节点集;不是那些实际分发的。