/ / Polymer 1.0 fügen Sie andere Polymerelemente innen hinzu - Javascript, html5, Polymer, Web-Komponente

Polymer 1.0 fügen Sie andere Polymerelemente innen hinzu - Javascript, html5, Polymer, Web-Komponente

Hallo, was ist der Unterschied beim Hinzufügen eines Kind-Polymerelements wie folgt:

<dom-module id="app-element">
<template>
<h1>Hello</h1>
<test-element></test-element>
</template>
<script>
Polymer({
is: "app-element"
});
</script>
</dom-module>
<app-element></app-element>

Das funktioniert gut. Die Auswirkung des Hinzufügens von HTML-Code (einschließlich anderer Polymerelemente) in das app-Element-Tag

<app-element>some html here</app-element>

so was:

 <dom-module id="app-element">
<template>
<h1>Hello</h1>

</template>
<script>
Polymer({
is: "app-element"
});
</script>
</dom-module>
<app-element>
<test-element></test-element>
</app-element>

Dies ignoriert den Testelementcode. In welchen Fällen kann ich HTML-Code in ein Polymerelement einfügen? Wann wird es ignoriert werden? Was wäre der Fall, wenn Sie Polymerelemente in andere Polymerelemente innerhalb des HTML-Codes wie folgt einfügen möchten:

<app-element>
<test-element></test-element>
</app-element>

?? Vielen Dank

Antworten:

3 für die Antwort № 1

In Ihrem ersten Fall verwenden Sie lokale dom, in dieser Sekunde Lichtdom. In local dom ist das benutzerdefinierte Element, das es enthält, für den Inhalt verantwortlich (in diesem Fall app-element). Also die Schöpfer des benutzerdefinierten Elements entscheidet über den Inhalt des lokalen Doms. Im Gegensatz dazu bietet die Verwendung von Licht Dom Nutzer des benutzerdefinierten Elements mit der Option, den Inhalt anzugeben. Der Ersteller des benutzerdefinierten Elements kann angeben, wohin die Lichtdomäne innerhalb des benutzerdefinierten Elements wechseln soll <content></content> Etikett. Um also Ihr zweites Beispiel arbeiten zu lassen, benötigen Sie Folgendes:

<dom-module id="app-element">
<template>
<h1>Hello</h1>
<content></content>
</template>
<script>
Polymer({
is: "app-element"
});
</script>
</dom-module>
<app-element>
<test-element></test-element>
</app-element>

Ein Anwendungsbeispiel für Lichtdom ist der Papier-Dialog. Mit light dom kann der Benutzer des Dialogs den Inhalt des Dialogs bestimmen. Zum Beispiel die spezifischen zu verwendenden Schaltflächen, der Hauptinhalt des Dialogs usw. Schau es dir an diese Seite in der Dokumentation für weitere Informationen zu lokalen und Lichtdom.


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen