HTML/Web Components

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Web Components Logo

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
  • HTML Imports: Weiterhin ist es möglich, mit dem HTML-Element link im head einer Webseite HTML-Dokumente in andere HTML-Dokumente zu laden und dann freizuschalten.

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.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com


Web Components
(Übersicht)

Warum Web Components?[Bearbeiten]

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[Bearbeiten]

Weblinks[Bearbeiten]