Frontend Entwicklung: Web Components

Web Components sind eine Anzahl von Web APIs, mit deren Hilfe Entwickler eigene, wiederverwendbare, gekapselte HTML-Tags erstellen können. Diese HTML-Tags können anschließend in Webseiten und Webanwendungen verwendet werden. Komponenten und Widgets die auf den Web Component-Standards aufbauen, werden mit allen gängigen, modernen Browsern funktionieren und können in Kombination mit beliebigen JavaScript-Bibliotheken und Frameworks, die mit HTML arbeiten, verwendet werden. Das Ziel von Web Components ist es, die Art der Einbindung von Plugins in Webanwendungen bis zu einem gewissen Grad zu vereinheitlichen und damit auch zu vereinfachen. Die Kapselung hat den großen Vorteil, dass jegliche Interna des auf dem Web Components Standard aufbauenden Moduls für weitere Elemente in einem HTML-Dokument verborgen bleiben – So lassen sich für Entwickler wie Anwender gleichermaßen lästige Konflikte zwischen Plugins und Scripten die von einer Webseite eingebunden werden elegant und effektiv umgehen.

Vorteile von Web Components

Web Components bauen auf vorhandenen Webstandards auf. Gegenwärtig werden die offiziellen HTML- und DOM-Spezifikationen um Features zur Unterstützung von Web Components erweitert. Damit wird ultimativ erreicht, dass Frontend Entwickler HTML mit quasi beliebigen neuen, sich selbst definierenden Elementen erweitern können. Durch die Kapselung von Style und spezifischem Verhalten dieser Eigenentwicklungen wird sichergestellt, dass keine unerwünschten Nebeneffekte in Kombination mit anderen Elementen des Dokuments auftreten. Ein absolut naheliegender und unterstützungswürdiger Ansatz, den wir schon vor 10 Jahren dringend gebraucht hätten.

Grundsätzlich ist zur Registrierung eines eigenen Moduls mit dem Ziel dieses danach wie ein Standard-HTML-Element behandeln zu können lediglich der Methodenaufruf document.registerElement('meinNamespace-meinModulname',...) nötig.

Im Wesentlichen bauen Web Komponenten auf 4 Kernkonzepten auf, namentlich HTML Templates, HTML Imports, Shadow DOM und Custom Elements.

Custom Elements (Eigene Elemente)

Eigene, vom Entwickler definierte Elemente können entsprechend ihrer Art in zwei Kategorien gruppiert werden: Einmal die autonomen Custom Elements und daneben individuell angepasste HTML-Elemente die als solche bereits Teil der Spezifikation sind. Autonome Custom Elements sind hingegen HTML-Elemente, die komplett von diesem nativen HTML-Elementen getrennt sind. Sie werden quasi mit der Custom Elements-API von Grund auf neu erstellt. Die sogenannten Customized Built-In Elements sind Elemente, die die Funktionalität nativer HTML-Elemente wiederverwenden und erweitern.

HTML Templates

HTML Templates gehören zu den Ansätzen, auf die bei der Entwicklung von Modulen auf Basis von Web Components zurückgegriffen wird. Mit dem tag