Polymer 2 中的 getContentChildren 等效项

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)

this.$ 哈希是在初始化影子 DOM 时创建的。节点 动态创建的不会添加到 this.$ 哈希中。所以，你必须使用this.shadowRoot.querySelector。

更新提供演示后：

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