Web Components erklärt
Mit JavaScript Frameworks wie React und Angular können Entwickler schon lange wiederverwendbare Web-Elemente definieren. Jedoch nutzt jedes Framework einen anderen Standard, was den projektübergreifenden Einsatz der praktischen Code-Schnipsel in vielen Fällen verhindert. Abhilfe schaffen die sogenannten Web Components, bei denen es sich um wiederverwendbare HTML-Komponenten handelt, die unabhängig vom Framework einsetzbar sind. Der 2012 standardisierte Web-Elemente-Typ wird mittlerweile von jedem gängigen Browser unterstützt.
Was sind Web Components?
Web Components sind Code-Blöcke, die den inneren Aufbau von HTML-Elementen inklusive CSS und JavaScript kapseln und ermöglichen, den jeweiligen Code an beliebiger Stelle in Websites und Web-Apps zu nutzen. Entwickelt wurde das Konzept von einer Arbeitsgruppe des World Wide Web Consortium (W3C), das 1994 vom Weberfinder Tim Berners-Lee gegründet wurde und sich seitdem intensiv für eine Standardisierung aller elementaren Webtechnologien einsetzt. Das 2012 als Standard veröffentlichte Web-Components-Modell sieht primär folgende vier Spezifikationen für die Erstellung der nützlichen HTML-Komponenten vor:
- Custom Elements: Satz von JavaScript-APIs zur Definition benutzerdefinierter Elemente
- Shadow DOM: Satz von JavaScript-APIs zum Hinzufügen von DOM-Elementen
- ES Modules: Module für die Einbindung und Wiederverwendung von JavaScript-Dokumenten
- HTML-Templates: Mark-up-Vorlagen, die auf der dargestellten Seite nicht abgebildet werden und als Grundlage für benutzerdefinierte Elemente verwendet werden können
Warum sollte man Web Components nutzen?
Bibliotheken und Frameworks wie Angular oder jQuery zählen seit Jahren zu den wichtigsten Arbeitsmitteln eines jeden Web-Programmierers. Doch so praktisch und vielseitig diese Code-Grundgerüste, die eine Menge Arbeit bei der Entwicklung von Projekten ersparen, auch sind, so unflexibel zeigen sie sich häufig, wenn es um eine projektübergreifende Nutzung geht. Nicht selten müssen Entwickler Code neu schreiben bzw. umschreiben, wenn beispielsweise ein Framework-Wechsel ansteht. Aus diesem Grund führte das World Wide Web Consortium (W3C) Web Components und damit einen universellen Rahmen für die einfache und übergreifende Wiederverwendung von HTML-, CSS- und JavaScript-Code ein.
Da die universellen Web-Elemente sich durch eine einfache, schnell zu lernende Syntax auszeichnen, profitieren auch Programmieranfänger von dem W3C-Standard. In den letzten Jahren arbeitet Google im Rahmen des „Polymer Projects“ daran, Bibliotheken und Templates für die Programmierung von Web Components zu entwickeln und frei zur Verfügung zu stellen.
Da die universellen Web-Elemente sich durch eine einfache, schnell zu lernende Syntax auszeichnen, profitieren auch Programmieranfänger von dem W3C-Standard. In den letzten Jahren arbeitet Google im Rahmen des „Polymer Projects“ daran, Bibliotheken und Templates für die Programmierung von Web Components zu entwickeln und frei zur Verfügung zu stellen.
Die Web-Components-Bestandteile im Überblick
Das Web-Components-Modell stützt sich grundsätzlich auf vier Spezifikationen, auf die wir im Folgenden näher eingehen. Zudem geben wir einige konkrete Beispiele für die Web-Components-Spezifikationen.
Custom Elements
Custom Elements (benutzerdefinierte Elemente) sind HTML-Tags, die den Inhalt von HTML inklusive CSS-Anweisungen und Skripten kapseln. Sie werden in der CustomElementRegistry deklariert. Ihre wichtigsten Merkmale sind:
- Sie enden mit einem schließenden Tag.
- Ihr Name ist ein DOM-String und enthält immer einen Bindestrich.
- Ihr Name darf innerhalb der CustomElementRegistry nur einmal vorkommen.
customElements.define('mein-button', MeinButton, { extends: 'p' });
Um dieses Element nun in einer Webanwendung nutzen zu können, reicht folgender Code:
<mein-button></mein-button>
Shadow DOM
Die wichtigste Eigenschaft von Web Components ist ihre Fähigkeit, HTML-Elemente zu kapseln. Die Shadow-DOM-API hilft Ihnen dabei, indem sie ermöglicht, einem Dokumentenbaum versteckte DOM-Bäume anzuhängen. Dabei ist ausschließlich das HTML-Tag des Shadow DOMs sichtbar. Damit können Sie das versteckte DOM um HTML-Elemente erweitern, ohne jedes Mal auch das Haupt-DOM verändern zu müssen. Ausführlichere Informationen zu dieser Technik sowie konkrete Anwendungsbeispiele finden Sie in unserem Artikel über Shadow Doms und ihre Funktionsweise.
ES Modules
ES Modules sind Module, die Objekte, Funktionen oder Variablen aus einer JavaScript-Datei exportieren. Diese Eigenschaft ermöglicht es, Variablen innerhalb einer Datei sinnvoll in Gruppen zu unterteilen und sie zu referenzieren. Derzeit gibt es zwei ES-Modul-Systeme. Während CommonJS ursprünglich Node.JS gehörte, ist das neuere System bereits in JavaScript ES6 enthalten.
Um eine Funktion aus einer JavaScript-Bibliothek zu exportieren, nutzen Sie die Methode export. In dem Beispiel exportieren Sie eine Funktion, die einen Inputstring zweimal wiedergibt.
Um eine Funktion aus einer JavaScript-Bibliothek zu exportieren, nutzen Sie die Methode export. In dem Beispiel exportieren Sie eine Funktion, die einen Inputstring zweimal wiedergibt.
// ? lib.bib1
export const wiederhole = (string) => `${string} ${string}`;
}
Via import können Sie die exportierte Funktion nun beliebig oft aufrufen.
main.mjs
import {wiederhole} from './lib.mein';
wiederhole ('Guten Tag');
// → 'Guten Tag Guten Tag'
HTML-Templates
Ein HTML-Template ist eine Vorlage für HTML-Dateien. Die enthaltenen Elemente bleiben dabei solange inaktiv und ungerendert, bis sie explizit aufgerufen werden. Durch diese Eigenschaft haben sie keinen negativen Effekt auf die Ladezeit einer Webseite. Sie stellen daher eine sinnvolle Alternative zu den herkömmlichen JavaScript-Methoden dar.
Mit dem Tag <template> definieren Sie ein HTML-Template. Im folgenden Beispiel erzeugen Sie ein Template namens „Mein Element“.
Mit dem Tag <template> definieren Sie ein HTML-Template. Im folgenden Beispiel erzeugen Sie ein Template namens „Mein Element“.
<template id="mein-element">
<p>Mein Element</p>
</template>
Um das Template in einer Webseite zu verwenden, rufen Sie es mit den JavaScript-Methoden getElementbyId und content auf und hängen es an das DOM.
let template = document.getElementById('mein-element');
let templateContent = template.content;
document.body.appendChild(templateContent);
Wie nutze ich Web Components?
Die vorgestellten Beispiele für Web Components funktionieren nur, indem Sie die einzelnen Bestandteile des Web-Components-Modells miteinander kombinieren. Folgendes Schema stellt die Vorgehensweise vereinfacht dar:
- Erzeugen Sie eine JavaScript-Klasse oder -Funktion oder exportieren Sie sie aus einer bestehenden JavaScript-Datei mithilfe von ES Modules.
- Deklarieren Sie Ihr neues Custom Element mit der Methode CustomElementRegistry.define().
- Wenn nötig bzw. gewünscht, hängen Sie ein verstecktes Shadow DOM an, um Ihrem Custom Element Kind-Elemente hinzuzufügen.
- Definieren Sie ein HTML-Template mit den Tags <template> und <slot>.
- Verwenden Sie das erzeugte Custom Element innerhalb Ihrer Webseite wie ein gewöhnliches HTML-Element.
Kompatibilität von Web Components mit den verschiedenen Browserversionen
Die Kompatibilität von Web Components war in früheren Browserversionen noch nicht gegeben. Inzwischen unterstützen jedoch alle gängigen Browser Custom Elements, Shadow DOM, ES Modules und HTML-Templates. Die folgende Tabelle bietet eine Kompatibilitätsübersicht der verschiedenen Web Components.
Kompatibel? | Firefox | Chrome | Edge | Safari | Opera |
---|---|---|---|---|---|
Custom Elements | Ja | Ja | Ja (ab Version 76) | Ja | Ja |
Shadow DOM | Ja | Ja | Ja (ab Version 75) | Ja | Ja |
ES Modules | Ja | Ja | Ja | Ja | Ja |
HTML-Templates | Ja | Ja | Ja | Ja | Ja |
Bibliotheken, Vorlagen und Beispiele für Web Components
Gerade als Anfänger gestaltet sich die Programmierung von Web Components mitunter kompliziert. Im Web finden Sie jedoch zahlreiche Bibliotheken mit Vorlagen und Standardfunktionen sowie praktische Beispiele für Web Components, die Ihnen die Arbeit erleichtern.
- Lit Element: einfache Basis-Klasse zur Kreation von Web Components
- Polymer Project: Im Rahmen des Polymer-Projekts bietet Google diverse Tools für die Arbeit mit Web Components – u. a. ein Starterkit, um Apps mit Web Components zu programmieren, eine HTML-Template-Bibliothek für JavaScript sowie verschiedenste einsatzfertige Elemente.
- Hybrids: stellt einfache UI-Bibliothek zur Erstellung von Web Components zur Verfügung
- Slim.js: Bibliothek mit erweiterten Eigenschaften für Web Components, die auf klassenbasierte Vererbung von JavaScript ES6 zurückgreift