Die Einlogmaske auf der Webseite kapselt
der Anwender einfach in einer weiteren
Web Component »<user-auth>«. Die
deponiert bei einem erfolgreichen Login
die Benutzer-ID im »sessionStorage« des
Browsers in dem Schlüssel »userid«.Durchbrüche
Listing 6 zeigt, wie Entwickler Web
Components mit Stylesheet-Angaben
auch von außerhalb des Shadow DOM
formatieren. Elemente im Shadow DOM
übernehmen Formatierungsangaben wie
üblich aus dem Standard-Stylesheet des
Browsers oder aus dem »<Body>«-Ele-
ment, etwa »font-family« in Zeile 2 von
Listing 6. Die Shadow Root lässt sich
über den Tag-Namen formatieren (Zeilen
8 bis 16). Sie vererbt aber keine Format-
angaben, sondern konfiguriert nur den
rechteckigen Bereich, in dem der Browser
die Web Components rendert.
Das Innenleben des Shadow DOM lässt
sich ansonsten nur über CSS-Hooks for-
matieren. Die Angabe »background-color:var(--anot-item-bg, #f3f315);« aus Zeile 7
von Listing 5 deklariert einen Hook für
die Hintergrundfarbe der Listenelemente.
Es setzt den sechsstelligen RGB-Wert hin-
ter dem Hashmark standardmäßig auf
Neongelb. Die Zeile 26 von Listing 6
überschreibt schließlich den Farbwert
beispielhaft mit Neonrot.Fazit
Web Components bieten dem Entwickler
ein wichtiges Design Pattern, um klein-
teilige Microservices in seine Webseite zu
integrieren. Anpassbare Elemente (Cus-
tom Elements) erlauben es, universelle,
deklarative Bezeichner für die Compo-
nents zu entwerfen. Das Shadow DOM
verringert die Konflikte mit dem Rest-
dokument und bietet Schnittstellen zur
Programmierung und Formatierung. Den
Einsatz des Design Pattern kultiviert bei-
spielsweise Googles Open-Source-Frame-
work Polymer, das zugleich einen ganzen
Zoo vorgefertigter Web Components frei
Haus mitbringt. (kki) nInfos
[1] Web Components:
[https:// http://www. webcomponents. org]
[2] Polymer: [https://polymer‑project. org]
[3] X‑Tag von Mozilla: [https:// x‑tag. github. io]
[4] Mozilla zu Web Components:
[https:// developer. mozilla. org/ en‑US/
docs/ Web/ Web_Components]
[5] Firefox Web Components API:
[https:// hacks. mozilla. org/ 2018/ 10/
firefox‑63‑tricks‑and‑treats/]
[6] Design Pattern: [https:// http://www.
webcomponents. org/ introduction]
[7] Custom Elements: [https:// w3c. github. io/
webcomponents/ spec/ custom/]
[8] Shadow DOM: [https:// w3c. github. io/
webcomponents/ spec/ shadow/]
[9] HTML‑Templates: [https:// html. spec.
whatwg. org/ multipage/ scripting. html#
the‑template‑element]
[10] Javascript‑Modulsystem:
[https:// html. spec. whatwg. org/ multipage/
webappapis. html# integration‑ with‑the‑ja‑
vascript‑module‑system]
[11] Node‑Paketarchiv: [www. npmjs. org]Programmieren96
http://www.linux-magazin.deWebentwicklung01 const anotItem = document.createElement('template');
02 anotItem.innerHTML = `
03 <style>
04 li {
05 padding:0.3rem;
06 margin:0.2rem;
07 background‑color: var(‑‑anot‑item‑bg, #f3f315);
08 }
09 </style>
10 <li id="text"></li>`;
11
12 class AnotItem extends AnotElement {
13 constructor(text) {
14 super();
15 this.shadowRoot.appendChild(anotItem.content.cloneNode(true));16 this.shadowRoot.querySelector('#text').innerHTML = text;
17 this.shadowRoot.querySelector('li').addEventListener('click',
e => this.rmItem(text));
18 }
19
20 rmItem(text) {
21 this.remove();
22 this.delItem(text);
23 }
24 }
25
26 customElements.define('anot‑title', AnotTitle);
27 customElements.define('anot‑item', AnotItem);
28 customElements.define('anot‑list', AnotList);
29 })();Listing 5: »anot‑list.js« (Fortsetzung)01 body {
02 font‑family: sans‑serif;
03 width:80%;
04 max‑width:960px;
05 margin:auto;
06 }
07
08 anot‑list {
09 position:fixed;10 right: 7%;
11 width: 18%;
12 margin‑top: 2em;
13 padding: 2em;
14 border‑radius: 0.5em;
15 border:1px solid #aaa;
16 }
17
18 article {19 margin: auto;
20 float:left;
21 margin‑left: 20%;
22 margin‑right: 30%;
23 }
24
25 li {
26 ‑‑anot‑item‑bg: #ff6699;
27 }Listing 6: CSS für Web Components