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:
- TEIL 1: Die Webstandards
- TEIL 2: Eine eigene Komponente mit LitElement
- TEIL 3: Attributes & Properties
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 vier Web Component-Standards
Die Gruppe der Web Component-Standards besteht generell aus vier separaten Webstandards.
Custom Elements
Eine Web Component ist per Definition eine JavaScript-Klasse, die von HTMLElement erbt. 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). Das folgende Beispiel zeigt die Definition einer Web Component:
Ursprünglich war es vorgesehen, dass von mehr Klassen als HTMLElement (z. B. HTMLButtonElement) geerbt werden kann. Dieses Feature hat der Safari jedoch nie implementiert, weshalb es in der Praxis keine Verbreitung erfahren hat.
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. Das folgende Beispiel zeigt, wie mit Klick auf einen Button ein HTML-Template erneut in das DOM gestempelt werden kann:
HTML-Templates erlauben nur die Nutzung von Standard HTML. Es gibt keinerlei Unterstützung für Data Binding oder Ähnliches!
zurück zur Blogübersicht
Diese Beiträge könnten Sie ebenfalls interessieren
Keinen Beitrag verpassen – viadee Blog abonnieren
