Web Components
Web Components erweitern die begrenzte Welt der HTML-Elemente.
- template ermöglicht, bisher dynamisch erzeugten Code als Vorlage (engl. template) schon im HTML-Dokument anzugeben und dann durch Javascript mittels appendChild() in den Elementenbaum einzuhängen.
- Shadow DOM: kapselt HTML-Elemente, um wiederverwendbare Komponenten zu erstellen. Diese enthalten versteckte Elemente, die von Skripten und CSS-Regeln isoliert sind.
- custom elements ermöglichen, eigene Elemente zu erstellen oder bestehende zu erweitern
Bei Web Components handelt es sich um keine eigene, in sich abgeschlossene API, sondern um eine Erweiterung des DOM und HTML Standards.
Die derzeit implementierte Version wird in Abgrenzung zu den experimentellen Versuchen der Jahre 2013-14 als Version 1 (v1) bezeichnet.
Warum Web Components?
Für Desktop-Anwendungen ist es seit sehr langer Zeit gang und gäbe, komplexe Elemente der Benutzeroberfläche in selbst definierten Komponenten zu kapseln. Natürlich ist das oft nur eine Ansammlung der bekannten Dinge plus Code, zusammengefasst unter einer Haube, und man kann das auch alles einzeln notieren. Aber übersichtlicher wird das am Ende nicht unbedingt. Es ist schon von Vorteil, wenn die Komplexität der Komponente hinter einer einzelnen Zeile Code verschwindet, zumindest an der Stelle, an der sie im restlichen Kontext eingebunden ist.
Auch im Webumfeld, wenn der Anwendungsfall noch nicht lautstark nach einer Webanwendung ruft (also das, was man auf dem Desktop als Programm mit GUI erzeugt hätte), lassen sich Komponenten nutzen. Beispielsweise sollen Daten in Form eines Tortendiagramms dargestellt werden. Das kann man machen, indem man einen Canvas nimmt und etwas drauf herummalt, oder ein SVG nimmt und ein paar Deklarationen für die geometrischen Gebilde einfügt, oder vielleicht mit CSS aus ein paar Rechtecken Tortenstücke zaubert und im Kreis anordnet. Oder man erstellt sich daraus ein Widget ([ˈwɪʤət] aus Window Gadget), dem man nur noch die Daten übergibt.
Wenn Sie immer wieder Javascript an eins der HTML-Elemente anflanschen, oder gar mehrere HTML-Elemente in immer derselben Anordnung zuzüglich Javascript-Code eine wiederkehrende Einheit bilden, dann kann man darüber nachdenken, daraus eine Komponente zu erstellen. Die ist dann einfacher eingebaut als der komplexe HTML-Code plus Eventhandlerverdrahtung, die im Web Component im Shadow DOM für den Nutzer unsichtbar bleibt. Da das Shadow DOM in sich gekapselt ist, muss keine Rücksicht auf evtl. bestehende IDs oder CSS-Regelsätze genommen werden.
Komponenten sind also sehr stark darin, wiederverwendbaren Dingen einen semantischen Rahmen zu geben.
Siehe auch
- SelfHTML-Blog: Web Components – eine Einführung von Raoul Schaffranek (09.12.2014)
- Einbinden einer OSM-Karte als Beispiel für Custom Elements
SELF-Blog-Artikel von Jürgen Berkemeier,
Leaflet ist eine API, um Karten in Webseiten einzubinden
Weblinks
- W3C: Web Components
- speakerdeck: Web Components von Gunnar Bittersmann
- speakerdeck: Ein Überblick zu Web Components von Thomas Meinike mit vielen interessanten Beispielen
