getContentChildren相當於聚合物2

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> 

聚合物1.0，我可以通過使用

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

這將在返回<div toggle>I'm the toggle</div>

但是得到分佈式子節點聚合物2 getContentChildren不再被支持，做這種方式

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

不回我預期的元素，<div slot="toggle">I'm the toggle</div>。

我如何獲得聚合物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。因此，像polymer 1一樣使用var equal = elementClicked === this.toggleEl[0]。