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]

这会 return <div toggle>I'm the toggle</div>

但是在 Polymer 2 中。getContentChildren 不再受支持，所以这样做

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

我 return 不是预期的元素，<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)

The this.$ hash is created when the shadow DOM is initialized. Nodes created dynamically are not added to the this.$ hash. So, you have to use this.shadowRoot.querySelector.

更新演示后提供：

_toggleEl 是一个 array/object 并且您正在将它与一个元素进行比较。所以，它总是返回 false。所以，像在 polymer 1.

中那样使用 var equal = elementClicked === this.toggleEl[0]

Polymer 2 中的 getContentChildren 等价物

getContentChildren equivalent in Polymer 2

polymer

polymer-1.0

polymer-2.x