访问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>(插入点)用于在Shadow DOM中的特定位置处呈现轻DOM中的元素.使用<content select="k-anotherelement"></content>说" <k-anotherelement>在这里渲染任何元素.如果你想邀请所有轻的DOM节点进入渲染方,只需使用<content></<content>.

您的代码段的其他问题:

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

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

  对于a <content>,您可以迭代content.getDistributedNodes()以获取在插入点分布的节点列表.

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

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