Die Zeilen 4 und 5 binden die dazu pas-
senden Skriptkomponenten ein.
Der Javascript-Code von Listing 2 bis
Listing 5 löst die Tags in ein Dokument-
fragment samt Stylesheet-Angaben auf.
Aus Gründen der Lesbarkeit ist der Code
in mehrere Listings unterteilt. Die Zei-
len 26 bis 28 von Listing 5 definieren
am Ende die selbst entworfenen HTML-
Tags. Das angepasste Dokumentfragment
landet nach seiner Erzeugung jedoch
im so genannten Shadow DOM, wobei
»<anot-list>« eine Rolle als Wurzel-
element (Abbildung 1) übernimmt.Shadow DOM
Das neue DOM-Feature existiert außer-
halb des eigentlichen Dokumentbaums.
Der Code erzeugt eine Shadow Root,
um Dokumentfragmente unter einem
bestimmten Host-Element einzuhängen.
Das erzeugt einen Unterbaum für das Ele-
ment, Shadow DOM genannt. In diesem
lässt sich das angepasste neue Element
dann konstruieren.
Über das zugehörige Shadow-DOM-API
adressieren und konfigurieren Entwick-
ler eingebundene Elemente eleganter
als über das unbeliebte und sperrige
»<iframe>«-Tag. Das konkrete Ergebnis
ist eine interaktive Kommentarfunktion,
die in Abbildung 2 rechts neben dem
Dummytext zu sehen ist. Abbildung 3
zeigt den zugehörigen Quellcode für das
neue Element in der Entwicklerkonsole
des Browsers an.
Web Components lassen sich wegen ihrer
schwachen Wechselwirkung mit den üb-
rigen Dokumentbestandteilen universell
einsetzen. Google bietet solche Elemente
über das Open-Source-Framework Po-
lymer [2] an, Mozillas Bibliothek von
Webkomponenten nennt sich X-Tag [3].Microservices dienen derzeit immer
häufiger als Architekturmuster für Client-
Server-Anwendungen. Gemeint ist, dass
Entwickler monolithische Backends in
kleinere Dienste zerlegen. Die lassen
sich autonom voneinander entwickeln
und bei Bedarf mit geringem Aufwand
neu implementieren.Webentwickler fragen sich dabei natür-
lich, wie sie die Vielzahl der kleinteiligen
Dienste am geschicktesten in ihre Web-
seiten einbinden können. Eine Antwort
lautet: mit Web Components [1]. Bei de-
nen handelt es sich um selbst anpassbare
und wiederverwendbare HTML-Tags. Sie
sind standardisiert, funktionieren Brow-
ser-übergreifend und lassen sich mit
sämtlichen Javascript-Bibliotheken und
Frameworks verwenden, die auch mit
HTML funktionieren.
Mit ihnen integrieren Entwickler zum
Beispiel Microservices in Webseiten,
ohne die HTML-Dokumente mit redun-
danten »ID«-Attributwerten oder zusätzli-
chen Stylesheet-Angaben zu verwässern.Voll integriert
Die einzelnen Komponenten bindet der
Entwickler also über HTML-Tags ein, die
er selbst definiert. In den Zeilen 8 bis 10
von Listing 1 heißt dieses Tag beispiels-
weise »<anot-list>[...]</anot-list>«.Mit Web Components lassen sich eigene HTML-Tags definieren, um monolithisch aufgebaute Webseiten in Form
von kleineren Diensten neu zu strukturieren. Das vereinfacht nicht nur Pflege und Wartung der Sites. Andreas MöllerWebsites mit Web Components modularisieren
Teile fürs Web
Programmieren92
http://www.linux-magazin.deWebentwicklung© Cseh Ioan, 123RF01 [...]
02 <head>
03 [...]
04 <script src="https://unpkg.com/@webcomponents/
webcomponentsjs"></script>
05 <script type="module" src="anot‑list.js"></script>
06 </head>
07 <body>
08 <anot‑list>
09 <anot‑title>Meine Kommentare</anot‑title>
10 </anot‑list>
11 <article>Dummytext</article>
12 <todo‑list>[...]</todo‑list>
13 [...]Listing 1: »<anot‑list>« und
»<anot‑title>«