Wie verwende ich das Inhaltselement in Polymer?

Question

Von documentation heißt es, dass das <content> Element ein select Attribut unterstützt, das Knoten über einen einfachen Selektor filtert.

So sollten die auf ein bestimmtes Inhaltselement ausgerichteten LightDom-Elemente eine CSS-Klasse label/tag/value enthalten, die es dem Browser ermöglicht, sie dem entsprechenden Inhaltselement zuzuordnen, in dem css tag/label/value gesetzt ist das select Attribut? Sind helle dom-Elemente enthalten, bei denen keine solchen Beschriftungen auf ein <content> Element ohne select-Attribut abgebildet sind? Ein Beispiel, das die Möglichkeiten aufzählt, wäre sehr hilfreich.

Answer 1

So haben wir diese kleine Beschreibung über die DOM Distribution:

Zur Zusammensetzung eines Elements Licht DOM mit seinem lokalen DOM zu unterstützen, unterstützt Polymer das <content> Element. Das Element <content> bietet einen Einfügepunkt, an dem das helle DOM eines Elements mit seinem lokalen DOM kombiniert wird. Das Element <content> unterstützt ein Auswahlattribut, das Knoten über einen einfachen Selektor filtert.

Im Schatten-DOM verwaltet der Browser separate helle DOM- und Schatten-DOM-Bäume und erstellt eine gemischte Ansicht (den zusammengesetzten Baum) für Renderzwecke.

Im schattigen DOM behält Polymer seine eigenen hellen DOM- und schattigen DOM-Bäume bei. Der DOM-Baum des Dokuments ist effektiv der zusammengesetzte Baum.

Das ist nicht zu viel will, wenn jemand ein kleines Detail über das, was kann das <content> Element zu tun, so ein funktionierendes Beispiel das Papier-Symbolleiste Element sein könnte :) ein wenig mehr als eine einfache Klasse wählen ist, die zeigt uns, dass die Select ist ein querySelector Filter:

In HTML Sie das Papier-Symbolleiste wie folgt verwenden können:

<paper-toolbar class="tall"> 
    <paper-icon-button icon="menu"></paper-icon-button> 
    <div class="middle title">Middle Title</div> 
    <div class="bottom title">Bottom Title</div> 
</paper-toolbar> 

Und die Vorlage hat dies:

<template> 
    <!-- style ---> 

    <div id="topBar" class$="toolbar-tools [[_computeBarExtraClasses(justify)]]"> 
     <content select=":not(.middle):not(.bottom)"></content> 
    </div> 

    <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJustify)]]"> 
     <content select=".middle"></content> 
    </div> 

    <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJustify)]]"> 
     <content select=".bottom"></content> 
    </div> 
</template> 

So können Sie sehen, dass Sie in der Lage sind, den Inhalt "slot" mit CSS-Selektoren zu filtern, und der Inhalt ohne die Auswahl sollte alle untergeordneten Inhalte haben.

In JavaScript können Sie auch Zugriff auf die <content> Slots Inhalt zwei Wege; Sie können die Kinder aus einem Container-Element, das den Inhalt enthält, und Sie können this.getContentChildren('#content_id') verwenden, die Ihnen die Elemente Array geben wird.

Polymer hat eine detailliertere API mit <content>, und die Beschreibung auf ihrer Website zu arbeiten:

https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children

UPDATE

<content> wird <slot> Von 2,0 und von 1,7 sie zugegeben werden das Slot-Element für die Vormigration sollten Sie verwenden.Es ist ein bisschen anders als der Inhalt Elementselektoreinrichtung Sie nur eine name Eigenschaft kann und außerhalb Sie diesen Namen verwenden, um festzulegen, welche Steckplatz Sie setzen in möchten:

<template> 
    <!-- style --> 
    <paper-toolbar> 
     <slot name="header"></slot> 
    </paper-toolbar> 
    <slot name="content"></slot> 
</template> 

<my-element> 
    <div class="title" slot="header">title</div> 
    <div slot="content">content</div> 
</my-element> 

Leider Slot nicht alle der angegebenen bekommt slotted Elemente nur die erste aus dem DOM, so müssen wir ein paar Elemente, die der Css-Selektor verwendet wird, neu gestalten.