der Textknoten »Meine Kommentare«
aus Zeile 8 von Listing 1 als von außen
ins Shadow DOM hineingetragene Über-
schrift für »<anot-item>« auf.Löschfunktion
Listing 5 deklariert »<anot-item>«.
Nachdem Zeile 15 das zugehörige Tem-
plate geklont und im eigenem Shadow
DOM ergänzt hat, kopiert die nächste
Zeile den Kommentartext aus dem Auf-
rufparameter »text« in das »<li>«-Ele-
ment (Zeile 10). Das geschieht wieder
über eine Zuweisung an die Eigenschaft
»innerHTML«.
Dank Zeile 17 ruft ein Klick auf das
»<li>«-Tag die Löschroutine »rmItem()«
auf. Die entfernt über »remove()« den
Listenpunkt aus der Darstellung. Dann
löscht »delItem()« den Kommentar aus
»localStorage«.Bedenkenswert
Noch ein paar Anmerkungen für Ent-
wickler. Da der gezeigte Javascript-Code
dem Standard ECMA-Script 6 folgt, be-zieht sich die Referenzvariable »this« in
den Lambda-Funktionen der Zeilen 18
(Listing 3) sowie 17 (Listing 5) auf das
aktuelle Objekt und nicht, wie in den
vorherigen Javascript-Spezifikationen,
auf das Event-gebende Element, also den
Knopf oder den Listeneintrag.
Den Aufruf von »super()« in Konstruktor-
funktionen abgeleiteter Klassen (etwa in
Zeile 14 von Listing 5) sollten Entwick-
ler nie vergessen. Am Ende des Listings
registrieren die Aufrufe ab Zeile 26 die
vorgestellten Klassen unter dem entspre-
chendem Tag als Custom Elements.In den Microservice
Um vollständig ins Fahrwasser der Mi-
croservices einzutauchen, speichert der
Entwickler die Kommentare am besten
über ein Backend in einer zentralen Da-
tenbank auf dem Server. Dazu nutzt er im
Optimalfall XHTTP-Requests.
Um den Kommentator zu identifizieren,
programmiert er anschließend einen
zweiten Microservice. Dieser tauscht sich
dann mit dem ersten über ein geeignetes
Protokoll aus.Element in der folgenden Zeile bestätigt
die Benutzereingabe.
Die Zeile 17 der Konstruktorfunktion
zu der Klasse »AnotList«, die in Zeile
15 beginnt, erzeugt durch Klonen (»clo-
neNode()«) eine Kopie des Template, die
das Skript über den Aufruf der Methode
»append Child()« an das Ende der Shadow
Root verschiebt.
Hat der Nutzer auf den zuvor erwähn-
ten Button geklickt, veranlasst Zeile 18
den Aufruf der Callback-Funktion »add-
Item()«. Diese kopiert in Zeile 23 den
Wert aus dem »«-Feld und spei-
chert ihn in der Variablen »text«.
Schlägt der Aufruf der Methode »has-
Item()« zusammen mit dem übergebenen
Wert in Zeile 24 von Listing 3 fehl, spei-
chert Zeile 25 den neuen Kommentartext
unter »localStorage«. Zeile 26 visualisiert
ihn dann im HTML-Dokument, indem
sie die Methode »showItem()« aufruft.
Das geschieht dank der aufrufenden Kon-
struktorfunktion in Zeile 19 für jeden
gespeicherten Kommentar.
Als Nächstes fällt der Blick auf die Me-
thode »showItem()«. Sie instanziert in
Zeile 31 ein Objekt der Klasse »Anot-
Item«. Die Konstante »listed« speichert
vorübergehend die zurückgelieferte Re-
ferenz auf den Listeneintrag.
Die folgende Zeile hängt das zwischenge-
speicherte Element ans Ende der HTML-
Liste »
33 leert danach das Eingabefeld, Zeile 34
verleiht ihm den Fokus für weitere Kom-
mentareingaben.
Slots
An dieser Stelle hat das bisher nicht er-
wähnte »
späten Auftritt. Es übernimmt eine be-
sondere Aufgabe und dient im Shadow-
DOM-Standard als Einfügemarke für Ele-
mente von außerhalb. Im Beispiel spielt
es diese Rolle für die Zeile 8 aus Listing
1 , also »
tare«.
Die Klasse »AnotTitle« löst ab Zeile 11
in Listing 4 das Benutzer-definierte Ele-
ment »
der Web Components greift der Entwick-
ler dabei wieder auf das Design Pattern
für »
late verwendet in Zeile 9 mit »«
ein weiteres »
95http://www.linux-magazin.deProgrammierungWebentwicklungAbbildung 3: Die Entwicklerkonsole von Chromium hebt die Shadow Root im Dokumentenbaum hervor.01 const anotTitle = document.createElement
('template');
02 anotTitle.innerHTML = `
03 <style>
04 h3 {
05 margin: 0;
06 text‑align:center;
07 }
08 </style>09 <h3><slot></slot></h3>`;
10
11 class AnotTitle extends AnotElement {
12 constructor() {
13 super();
14 this.shadowRoot.appendChild(anotTitle.
content.cloneNode(true));
15 }
16 }Listing 4: »anot‑list.js« (Fortsetzung)