Polymer - Shadow DOM und Styling
Shadow DOM ist eine neue Eigenschaft von DOM, die zum Erstellen von Komponenten verwendet wird.
Example
Im folgenden Code enthält die Kopfzeilenkomponente den Seitentitel und die Menüschaltfläche.
<header-demo>
<header>
<h1>
<button>Mit Shadow DOM können die Kinder in einem Teilbaum mit Gültigkeitsbereich lokalisiert werden, der als bekannt ist shadow tree.
<header-demo>
#shadow-root
<header>
<h1>
<button>Die Schattenwurzelwurzel wird als Oberseite des Schattenbaums bezeichnet, und das an den Baum angehängte Element wird als Schattenhost (Header-Demo) bezeichnet. Dieser Schattenhost enthält eine Eigenschaft namens shadowRoot, die die Schattenwurzel angibt. Die Schattenwurzel identifiziert das Hostelement mithilfe einer Hosteigenschaft.
Shadow DOM und Komposition
Der Schattenbaum kann anstelle der untergeordneten Elemente des Elements gerendert werden, wenn sich im Schatten-DOM ein Element befindet. Die untergeordneten Elemente des Elements können gerendert werden, indem das <slot> -Element zum Schattenbaum hinzugefügt wird.
Verwenden Sie beispielsweise den folgenden Schattenbaum für <header-demo>.
<header>
<h1><slot></slot></h1>
<button>Menu</button>
</header>Fügen Sie die untergeordneten Elemente dem Element <my-header> als - hinzu
<header-demo>Shadow DOM</header-demo>Der Header ersetzt das </ slot> -Element durch die oben angegebenen untergeordneten Elemente als -
<header-demo>
<header>
<h1>Shadow DOM</h1>
<button>Menu</button>
</header>
</header-demo>Fallback-Inhalt
Der Fallback-Inhalt kann angezeigt werden, wenn dem Steckplatz keine Knoten zugewiesen sind. Zum Beispiel -
<my-element>
#shadow-root
<slot id = "myimgicon">
<img src = "img-demo.png">
</slot>
<slot></slot>
<my-element>Sie können ein eigenes Symbol für ein Element als - bereitstellen
<my-element>
<img slot = "myimgicon" src = "warning.png">
<my-element>Mehrstufige Verteilung
Sie können das Steckplatzelement einem Steckplatz zuordnen, der als mehrstufige Verteilung bezeichnet wird.
Nehmen Sie zum Beispiel zwei Ebenen eines Schattenbaums, wie unten gezeigt -
<parent-element>
#shadow-root
<child-element>
<!-- display the light DOM children of parent-element inside child-element -->
<slot id = "parent-slot">
<child-element>
#shadow-root
<div>
<!-- Render the light DOM children inside div by using child-element -->
<slot id = "child-slot">Betrachten Sie den folgenden Code -
<parent-element>
<p>This is light DOM</p>
<parent-element>Die Struktur eines abgeflachten Baums sieht wie folgt aus.
<parent-element>
<child-element>
<div>
<slot id = "child-slot">
<slot id = "parent-slot">
<p>This is light DOM</p>Shadow DOM verwendet die folgenden Slot-APIs zum Überprüfen der Verteilung:
HTMLElement.assignedSlot - Es ordnet den Steckplatz einem Element zu und gibt null zurück, wenn kein Element einem Steckplatz zugeordnet ist.
HTMLSlotElement.assignedNodes - Es enthält die Liste der Knoten zusammen mit dem Steckplatz und gibt die verteilten Knoten zurück, wenn Sie die Option "Reduzieren" auf "true" setzen.
HTMLSlotElement.slotchange - Dieses Ereignis wird ausgelöst, wenn sich die verteilten Knoten des Steckplatzes ändern.
Event Retargeting
Es gibt das Ziel des Ereignisses an, in dem das Element im selben Bereich wie das Listening-Element dargestellt werden kann. Es stellt ein Ereignis aus einem benutzerdefinierten Element bereit, das im Gegensatz zu einem darin enthaltenen Element aus dem benutzerdefinierten Element-Tag stammt.
Example
Das folgende Beispiel zeigt die Verwendung von Ereignis-Retargeting in Polymer.js. Erstellen Sie eine Datei mit dem Namen index.html und fügen Sie den folgenden Code ein.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "retarget-event.html">
</head>
<body>
<template id = "myapp" is = "dom-bind">
<retarget-event on-tap = "clicky"></retarget-event>
</template>
<script>
var myval = document.querySelector('#myapp');
myval.clicky = function(e) {
console.log("The retargeted result:", Polymer.dom(myval));
console.log("Normal result:", e);
};
</script>
</body>
</html>Erstellen Sie nun eine weitere Datei mit dem Namen retarget-event.html und fügen Sie den folgenden Code hinzu.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "retarget-event">
<template>
<span>Click on this text to see result in console...</span>
</template>
<script>
Polymer ({
is: 'retarget-event',
});
</script>
</dom-module>Output
Navigieren Sie zum Ausführen der Anwendung zum erstellten Projektverzeichnis und führen Sie den folgenden Befehl aus.
polymer serveÖffnen Sie nun den Browser und navigieren Sie zu http://127.0.0.1:8081/. Es folgt die Ausgabe.
Klicken Sie auf den obigen Text und öffnen Sie die Konsole, um ein Ereignis mit erneutem Ziel anzuzeigen, wie im folgenden Screenshot gezeigt.
Shadow DOM Styling
Sie können das Schatten-DOM mithilfe der Stileigenschaften formatieren, die vom Host an den Schattenbaum erben.
Example
<style>
.mydemo { background-color: grey; }
</style>
<my-element>
#shadow-root
<style>
//this div will have blue background color
div { background-color: orange; }
</style>
<div class = "mydemo">Demo</div>DOM-Vorlage
Der DOM-Teilbaum kann mithilfe der DOM-Vorlage für ein Element erstellt werden. Sie können die Schattenwurzel für das Element erstellen und die Vorlage in einen Schattenbaum kopieren, indem Sie einem Element eine DOM-Vorlage hinzufügen.
Die DOM-Vorlage kann auf zwei Arten angegeben werden:
Erstellen Sie ein <dom-module> -Element, das dem Namen eines Elements zusammen mit einem id-Attribut entsprechen soll.
Definieren Sie ein <template> -Element im <dom-module>.
Example
<dom-module id = "my-template">
<template>I am in my template!!!</template>
<script>
class MyTemplate extends Polymer.Element {
static get is() { return 'my-template' }
}
customElements.define(MyTemplate.is, MyTemplate);
</script>
</dom-module>Gestalte das Schatten-DOM eines Elements
Mit Shadow DOM können Sie die benutzerdefinierten Elemente mithilfe von Stileigenschaften wie Schriftarten, Textfarben und Klassen formatieren, ohne sie außerhalb des Bereichs Ihres Elements anzuwenden.
Lassen Sie uns das Host-Element mit dem formatieren :hostSelektor (ein Element, das an das Schatten-DOM angehängt ist, wird als Host bezeichnet). Erstellen Sie eine Datei mit dem Namen polymer-app.html und fügen Sie den folgenden Code hinzu.
<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">
<dom-module id = "polymer-app">
<template>
<style>
:host {
color:#33ACC9;
}
</style>
<h2>Hello...[[myval]]!</h2>
</template>
<script>
class PolymerApp extends Polymer.Element {
static get is() { return 'polymer-app'; }
static get properties() {
return {
myval: {
type: String, value: 'Welcome to Tutorialspoint!!!'
}
};
}
}
window.customElements.define(PolymerApp.is, PolymerApp);
</script>
</dom-module>Führen Sie die Anwendung wie im vorherigen Kapitel gezeigt aus und navigieren Sie zuhttp://127.0.0.1:8000/. Es folgt die Ausgabe.
Stil Schlitzinhalt
Es ist möglich zu erstellen slots in der Vorlage eines Elements, die zur Laufzeit belegt sind.
Example
Das folgende Beispiel zeigt die Verwendung von geschlitzten Inhalten in der Elementvorlage. Erstellen Sie eine index.html-Datei und fügen Sie den folgenden Code hinzu.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "slotted-content.html">
</head>
<body>
<slotted-content>
<div slot = "text">This is Polymer.JS Slotted Content Example</div>
</slotted-content>
</body>
</html>Erstellen Sie nun eine weitere Datei mit dem Namen slotted-content.html und fügen Sie den folgenden Code hinzu.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<dom-module id = "slotted-content">
<template>
<style>
::slotted(*) {
font-family: sans-serif;
color:#E94A9D;
}
</style>
<h2>Hello...[[prop1]]</h2>
<h3>
<div><slot name='text'></slot></div>
</h3>
</template>
<script>
Polymer ({
is: 'slotted-content', properties: {
prop1: {
type: String,
value: 'Welcome to Tutorialspoint!!',
},
},
});
</script>
</dom-module>Führen Sie die Anwendung wie im vorherigen Beispiel gezeigt aus und navigieren Sie zu http://127.0.0.1:8081/. Es folgt die Ausgabe.
Verwenden von Stilmodulen
Sie können die Stile zwischen Elementen zusammen mit Stilmodulen teilen. Geben Sie die Stile im Stilmodul an und teilen Sie sie zwischen den Elementen.
Example
Das folgende Beispiel zeigt, wie das Stilmodul zwischen den Elementen verwendet wird. Erstellen Sie eine index.html-Datei und fügen Sie den folgenden Code hinzu.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "style-module.html">
</head>
<body>
<style-module></style-module>
</body>
</html>Erstellen Sie eine weitere Datei mit dem Namen style-module.html mit dem folgenden Code.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<dom-module id = "style-module">
<template>
<!-- here, including the imported styles from colors-module page -->
<style include="colors-module"></style>
<style>
:host {
font-family: sans-serif;
color: green;
}
</style>
<h2>Hello...[[prop1]]</h2>
<p class = "color1">Sharing styles with style modules 1...</p>
<p class = "color2">Sharing styles with style modules 2...</p>
<p class = "color3">Sharing styles with style modules 3...</p>
</template>
<script>
Polymer ({
is: 'style-module', properties: {
prop1: {
type: String, value: 'Welcome to Tutorialspoint!!',
},
},
});
</script>
</dom-module>Erstellen Sie nun eine weitere Datei mit dem Namen colours-module.html , die die Stilmodule für die Elemente bereitstellt , wie im folgenden Code gezeigt.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<dom-module id = 'colors-module'>
<template>
<style>
p.color1 {
color: #EA5AA5;
}
p.color2 {
color: #4B61EA;
}
p.color3 {
color: #D3AA0A;
}
</style>
</template>
</dom-module>Führen Sie die Anwendung aus und navigieren Sie zu http://127.0.0.1:8081/. Es folgt die Ausgabe.
Verwenden Sie benutzerdefinierte Eigenschaften
Die benutzerdefinierten CSS-Eigenschaften können verwendet werden, um das Erscheinungsbild des Elements in Ihrer Anwendung mithilfe des Polymer-Elements zu gestalten. Benutzerdefinierte Eigenschaften bieten kaskadierende CSS-Variablen, die außerhalb der Umgebung von benutzerdefinierten Elementen verwendet werden können, um die Streudaten nicht über ein Stylesheet zu streuen.
Die benutzerdefinierten Eigenschaften können ähnlich wie Standard-CSS-Eigenschaften definiert werden, die vom zusammengesetzten DOM-Baum erben. Im vorherigen Beispiel sehen Sie die benutzerdefinierten CSS-Eigenschaften, die für die Elemente definiert wurden.
Wenn unter der CSS-Vererbung kein Stil für ein Element definiert ist, erbt es den Stil von seinem übergeordneten Element, wie im folgenden Code gezeigt.
<link rel = "import" href = "components/polymer/myelement-style.html">
<myelement-style>
<style is = "myelement-style">
p {
color: var(--paper-red-900);
}
paper-checkbox {
--paper-checkbox-checked-color: var(--paper-red-900);
}
</style>
</myelement-style>
<body>
<p><paper-checkbox>Check Here</paper-checkbox></p>
</body>