Eigene Komponenten mit Web Components – Teil 1: Die Webstandards im Überblick

Dienstag, 28.5.2019

Die Welt der Webentwicklung dreht sich immer schneller. Wer eigene, wiederverwendbare Komponenten entwickeln will, hat eine Vielzahl an Bibliotheken und Frameworks zur Verfügung. Sie bieten alle erdenklichen Möglichkeiten von Dependency Injection bis Form Validation.

Damit bindet man sich gleichzeitig jedoch an ein Framework oder eine Bibliothek. Man ist abhängig von deren Updatepolitik (man denke insbesondere an breaking changes) und Vision bzw. Wille zur Weiterentwicklung. Dieser Beitrag ist Teil einer Serie: 

Eigene, wiederverwendbare, unabhängige Komponenten mit Web Components

Eine Möglichkeit, diese Abhängigkeit zu umgehen, ist die Nutzung von Webstandards. Diese Methode möchte ich in dieser Blogserie erläutern. In diesem ersten Teil gebe ich einen Überblick über die Webstandards, die man als Web Components bezeichnet, und deren Browserunterstützung.

Da sich die großen Browserhersteller (mittlerweile nur noch Google, Apple und Mozilla) auf Webstandards einigen, sind diese änderungsstabil. Ab und an kommen vielleicht neue Features hinzu, aber dass bestehende Funktionalität entfernt wird, ist sehr selten. Dies hat gleichzeitig den Nachteil, dass es oftmals nur der kleinste gemeinsame Nenner ist, auf den sich die Browserhersteller einigen. Und nur weil sich die Browserhersteller auf etwas einigen, committen sie sich nicht auf einen Zeitpunkt, an dem alle die Funktionalität in ihrem Browser ausrollen.  

Die Web Component-Technologie umfasst eine Gruppe von Webstandards, die es erlaubt, neue eigene HTML-Tags zu definieren. Diese Komponenten sind gekapselt und können wiederverwendet werden. Sie können mit beliebigen Frameworks oder Bibliotheken kombiniert werden.  

Die drei Web Component-Standards

Die Gruppe der Web Component-Standards besteht generell aus drei separaten Webstandards. Ursprünglich wurde noch ein vierter, HTML Imports, vorgeschlagen, dieser wurde jedoch nur von Chrome implementiert und auch hier wird der Support dafür eingestellt.

 

Custom Elements

Eine Web Component ist per Definition eine JavaScript-Klasse, die von HTMLElement erbt (Chrome und Firefox lassen auch andere Basisklassen, wie etwa HTMLInputElement, zu). Mit window.customElements.define kann diese hinter einem bestimmten HTML-Tag hinterlegt werden. In dieser Klasse können beliebige Properties, Attribute oder Funktionalitäten implementiert werden. Die Klasse besitzt einen parameterlosen Konstruktor (damit der Browser beliebig neue Instanzen erstellen kann) und kann Lifecycle Callbacks implementieren, wenn bestimmte Ereignisse im Lebenszyklus der Komponente auftreten (etwa einhängen in das Dokument). 

 

Vereinfachtes Beispiel der Definition einer eigenen Web Component

Verwendung der Komponente auf der HTML-Seite.

HTML Templates

Der HTML-Tag template erlaubt die Definition von HTML-Fragmenten, die beliebig oft in die Seite gestempelt werden können. Die Besonderheit ist, dass diese Fragmente erst evaluiert werden, wenn sie gestempelt werden, d. h. wenn eine neue Instanz in den DOM-Baum eingehängt wird. 

HTML-Templates erlauben nur die Nutzung von Standard HTML. Es gibt keinerlei Unterstützung für Data Binding oder Ähnliches!

Beispiel für die Nutzung eines HTML-Templates (Hinweis: Leider funktioniert die Live-Preview nicht im Microsoft Edge oder Internet Explorer 11.)

Shadow DOM

Die grundlegende Idee von Shadow DOM ist, dass jede Komponente über ihren eigenen, privaten DOM-Baum verfügt. Damit sind sowohl Template als auch Styling gekapselt. Dies bedeutet zum Beispiel, dass globales Styling, wie etwa Bootstrap, die Komponente nicht betrifft, da das Styling nicht auf den privaten DOM-Baum angewendet wird. Auch über ein document.querySelector sind die Elemente im Shadow DOM nicht zu erreichen. 

Der Programmierer hat die Möglichkeit, bei der Implementierung selbst zu entscheiden, ob Shadow DOM für eine Web Component verwendet werden soll.

Gute Unterstützung durch aktuelle und ältere Browser

Die Unterstützung durch die Browser kann in zwei Kategorien unterschieden werden: nativ und durch Polyfills.

Browserunterstuetzung 

Nativen Support bieten Firefox ab Version 63 (Oktober 2018), Chrome ab Version 67 (Mai 2018, wobei partieller Support ab Version 54 vorhanden ist), Safari ab Version 10.1 (März 2017), iOS ab Version 10.3 (März 2017). Mehr Informationen kann man auch hier finden: https://caniuse.com/#search=web%20component

Internet Explorer 11 und Edge (Stand April 2019) unterstützen die Standards nicht nativ. Für diese kann jedoch ein Support über JavaScript-Bibliotheken, die die Funktionalität des Standards emulieren, sogenannte Polyfills, nachgerüstet werden.

Der für Ende des Jahres 2019 angekündigte Edge auf Basis des Chromium-Projektes, der zurzeit als Entwicklerversion vorliegt, unterstützt Web Components. Es bleibt abzuwarten, ob dieser sich als Alternative zu Internet Explorer 11 und aktuellen Edge etabliert. Wer Internet Explorer 11 und Edge im Moment unterstützen muss, sollte auf absehbare Zeit die Polyfills mit seinen Web Components ausliefern.

Auf diese und weitere Themen möchte ich im Rahmen dieser Blogserie eingehen. Im nächsten Teil der Reihe werde ich zeigen, wie man mit der leichtgewichtigen Bibliothek LitElement eine eigene Web Component implementiert, ohne dass das Ergebnis paketiert oder kompiliert/transpiliert werden muss. 


Dieser Beitrag ist Teil einer Serie: 


Neuer Call-to-Action


zurück zur Blogübersicht

Diese Beiträge könnten Sie ebenfalls interessieren

Keinen Beitrag verpassen – viadee Blog abonnieren

Jetzt Blog abonnieren!

Kommentare

Christian Siebmanns

Christian Siebmanns

Christian Siebmanns ist Berater bei der viadee IT-Unternehmensberatung. Er hat seinen Schwerpunkt beim Einsatz in Kundenprojekten im Webumfeld und interessiert sich für alles, was ermöglicht, mit dem Nutzer interagieren zu können.