getContentChildren Äquivalent in Polymer 2

Question

ich ein benutzerdefiniertes Element

<!-- 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> 

In Polymer 1.0 konnte ich das verteilte Kindknoten erhalten, indem

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

mit der <div toggle>I'm the toggle</div>

jedoch zurückkehren würde in Polymer 2. getContentChildren wird nicht mehr unterstützt und macht es so

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

gibt mir nicht das erwartete Element zurück, <div slot="toggle">I'm the toggle</div>.

Wie bekomme ich das äquivalente Ergebnis unter Verwendung assignedNodes() in Polymer 2?

Bitte beachten Sie folgende plunker Danke.

Answer 1

Verwenden Sie den folgenden Code ein:

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

Aber wenn Sie einzelne slot haben, dann können Sie einfach tun:

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

Der this.$ Hash erzeugt wird, wenn der Schatten DOM initialisiert wird. Dynamisch erzeugte Knoten werden nicht zum Hash this.$ hinzugefügt. Also müssen Sie this.shadowRoot.querySelector verwenden.

aktualisieren Nach der Demo zur Verfügung gestellt:

_toggleEl ist ein Array/Objekt und Sie es mit einem Element vergleichen. Also, es gibt false immer zurück. Verwenden Sie also var equal = elementClicked === this.toggleEl[0] wie in polymer 1.