Zugriff auf alle inneren Elemente in Polymer?

Question

ich habe:

<k-myelement> 
    <k-anotherelement></k-anotherelement> 
</k-myelement> 

Wenn ich definieren die Vorlage wie folgt aus:

<polymer-element name="k-myelement"> 
    <template> 
     <content select="k-anotherelement" id="anotherelement"></content> 
    </template> 
</polymere-element> 

ich das innere Element zugreifen kann mit this.$['anotherelement']

Aber mit diesem Ansatz, den ich vordefinieren müssen, die innere Elemente können verwendet werden.

Was ich will, ist eine Template-Technik, mit der ich auf alle inneren Elemente zugreifen kann.

Answer 1

<content> (insertion points) dienen zum Rendern von Elementen im hellen DOM an bestimmten Stellen im Shadow-DOM. Mit <content select="k-anotherelement"></content> sagt „machen alle <k-anotherelement> Elemente hier Wenn Sie alle Licht DOM-Knoten wollen in die Rendering-Party eingeladen werden, einfach <content></<content> verwenden

Die anderen Probleme mit dem Code-Schnipsel:..

• Der Name des Element muss auf <polymer-element> definiert werden, nicht als <template name="k-myelement">

• um die Liste der Knoten zu erhalten, die durch eine <content> übergeben, verwenden content.getDistributedNodes(). Sie sollten auch prüfen, ob Sie auch <content> benötigen. Licht DOM Kinderknoten kann mit .children und den anderen Accessoren zugegriffen werden. Von the Polymer docs:

  Für eine <content>, können Sie durch content.getDistributedNodes() laufen die Liste der Knoten an der Einfügemarke verteilt zu bekommen.

  In Polymer, der beste Ort, um diese Methode aufzurufen ist in der attached() Rückruf, so dass Sie garantiert, dass das Element in der DOM-Struktur ist.

  Denken Sie auch daran, dass Sie auf das helle DOM als normale Kinder des Elements zugreifen können (d. H. this.children oder andere Accessoren). Der Unterschied zu diesem Ansatz besteht darin, dass es sich um den gesamten Satz potenziell verteilter Knoten handelt. nicht die tatsächlich verteilten.