Question

我有一个自定义元素

<!-- element template -->
<dom-module id="custom-element">
  <template>
    <style></style>
    <div class="toggle">
      <slot id="toggleContent" name="toggle"></slot>
    </div>
  </template>
  <script>...</script>
</dom-module>

<!--usage-->
<custom-element>
  <div slot="toggle">I'm the toggle</div>
</custom-element>

在Polymer 1.0中，我可以使用

获取分布式子节点

[this.getContentChildren('#toggleContent')\[0\];][1]

将返回<div toggle>I'm the toggle</div>

然而，在Polymer 2中，不再支持getContentChildren并且这样做

this.$.toggleContent.assignedNodes({flatten: true}).filter(function(n) {
  return (n.nodeType === Node.ELEMENT_NODE);
});

不会返回预期的元素<div slot="toggle">I'm the toggle</div>。

如何在Polymer 2中使用assignedNodes()获得等效结果？

请参阅以下plunker 感谢。

Answer 1

使用以下代码：

this.shadowRoot
  .querySelector('#toggleContent')
  .assignedNodes({flatten:true})
  .filter(n => n.nodeType === Node.ELEMENT_NODE)

但如果您有单slot，那么您可以这样做：

this.shadowRoot
      .querySelector('slot')
      .assignedNodes({flatten:true})
      .filter(n => n.nodeType === Node.ELEMENT_NODE)

初始化阴影DOM时会创建this.$哈希。节点动态创建的不会添加到this.$哈希。因此，您必须使用this.shadowRoot.querySelector。

更新提供演示后：

_toggleEl是一个数组/对象，您将其与元素进行比较。所以，它总是返回false。因此，请像var equal = elementClicked === this.toggleEl[0]中那样使用polymer 1。

聚合物2中的getContentChildren等效项

1 个答案: