Web Components: Wiederverwendbare UI-Komponenten

Die grafischen Benutzeroberflächen (User Interfaces, kurz UI) von Websites werden standardmäßig mit HTML, CSS und JavaScript umgesetzt. Doch die erstellten Elemente lassen sich nur schwer an anderer Stelle wiederverwenden. Die Lösung: Web Components. In diesem Artikel erfahren Sie, was Webkomponenten sind und wie diese funktionieren.

Was sind Web Components?

Web Components oder auch Webkomponenten sind wiederverwendbare Code-Blöcke, die unabhängig von Frameworks eingesetzt werden können. In den Webkomponenten sind HTML-Elemente ebenso gekapselt wie CSS- und JavaScript-Codes.

Sie ermöglichen es, den jeweiligen Code an beliebigen Stellen in Web-Apps oder Websites zu nutzen, ohne dabei unerwünschte Wechselwirkungen mit anderen Code-Teilen auszulösen. Dabei können sowohl eigene Inhalte dargestellt als auch externe Daten importiert werden. So erweitern Web Components die begrenzte Welt der HTML-Elemente.

Während es für Desktop-Anwendungen bereits seit Jahren gang und gäbe ist, komplexe Elemente der Benutzeroberfläche in selbst definierte Komponenten zu kapseln, ist dies im Web lange Zeit nicht der Fall gewesen. Bibliotheken und Frameworks wie Angular, React oder Vue.js sind zwar praktisch und vielseitig, allerdings auch oft unflexibel, wenn es um eine projektübergreifende Nutzung geht. Wenn ein Framework-Wechsel ansteht, müssen Entwicklerinnen und Entwickler die Codes mühsam anpassen oder gar neu schreiben.

Eine Arbeitsgruppe des World Wide Web Consortiums (W3C), welches sich seit 1994 herstellerneutral durch die Erstellung von Spezifikationen und Referenzsoftware um die Schaffung von Standards für die Entwicklung des Webs bemüht, führte daher 2012 die Web Components und damit einen universellen Rahmen für die einfache und übergreifende Wiederverwendung von HTML-, CSS- und JavaScript-Code ein.

Bis die Web Components allgemein akzeptiert und genutzt wurden, hat es allerdings einige Jahre gedauert, doch mittlerweile werden sie von allen gängigen Browsern unterstützt.

Warum sollte man Webkomponenten benutzen?

Die universellen Webelemente kapseln die Funktion von Code (HTML), UI-Struktur (JavaScript) und UI-Design (CSS). Daraus werden wiederverwendbare Komponenten erstellt, die sich für eine finale Anwendung frei miteinander kombinieren lassen und auch in verschiedenen Kontexten eingesetzt werden können, etwa für Widgets oder Designelemente.

Die Ausgabe von Web Components ist im Browser standardisiert, es wird auch keine externe Library benötigt. Zudem spielen Webkomponenten eine wichtige Rolle, wenn Sie eine gewisse Isolation der Code-Blöcke benötigen, um Wechselwirkungen zu vermeiden. Sie zeichnen sich durch eine einfache sowie schnell zu lernende Syntax aus.

Überblick zu den Bestandteilen von Web Components

Das Web-Components-Modell besteht primär aus vier grundlegenden APIs für die Erstellung von HTML-Komponenten:

Custom Elements

Als Custom Elements (benutzerdefinierte Elemente) werden individuelle HTML-Tags bezeichnet, die den Inhalt von HTML inklusive CSS-Anweisungen und Skripten kapseln. Durch Custom Elements werden dem Browser sozusagen neue HTML-Tags gelehrt.

Ein wichtiges Merkmal ist, dass ihr Name immer einen Bindestrich enthalten muss, um sie von nativen Standard-Tags zu unterscheiden, wie beispielsweise „my-button“. Sie müssen außerdem mit einem schließenden Tag enden und ihr Name muss einmalig in der CustomElementRegistry hinterlegt sein. Custom Elements werden dafür mit der JavaScript-Methode „define“ kreiert. Folgendes Beispiel zeigt ein Custom Element, mit dessen Hilfe sich ein individuell gestalteter Button einbinden lässt:

customElements.define('my-button', MyButton, { extends: 'p' });

Für die Webanwendung ist dann folgender Code ausreichend:

<my-button></my-button>

Shadow DOM

Mithilfe von Shadow DOM, einer Unterform des standardmäßigen Document Object Models (DOM), können an ein beliebiges Element versteckte und parallele DOM-Bäume angefügt werden. Die sind dann ausschließlich für die in ihnen ausgedrückten Komponenten gültig und nicht für das gesamte Projekt, wie etwa bei bestimmten CSS-Anweisungen. Dabei ist ausschließlich das HTML-Tag des Shadow DOMs sichtbar.

Da das Shadow DOM in sich gekapselt ist, kann es zu keinen unerwünschten Wechselwirkungen mit anderen bestehenden CSS-Regelsätzen oder IDs kommen – dies erleichtert die Anwendung enorm und stellt so eine Alternative zu speziellen Technologien wie iFrames dar.

Sie können so auch zu jeder Zeit das versteckte DOM um HTML-Elemente erweitern, ohne jedes Mal das Haupt-DOM anpassen zu müssen. Allerdings ist diese Technik nicht auf alle HTML-Elemente anwendbar, so funktioniert Shadow DOM etwa nicht bei Bildern. Sie sind auf folgende HTML-Komponenten beschränkt:

• article
• aside
• blockquote
• body
• div
• footer
• h1, h2, h3, h4, h5, h6
• header
• main
• nav
• p
• section
• span

ES Modules

ES Modules sind ein standardisiertes Modulsystem für JavaScript, welches seit ECMAScript 6 von allen großen Browsern unterstützt wird. Dadurch lassen sich Objekte, Funktionen oder Variablen aus einer JavaScript-Datei exportieren.

Mit ES Modules können JavaScript-Module so indiziert und gecached werden, dass ein Zugriff von überall möglich ist. Durch die Modularisierung wird es dann theoretisch möglich, dass der Browser bei Änderungen nur die betroffenen Dateien neu abholen muss.

HTML-Templates

Templates erlauben es, einen HTML-Schnipsel auszugeben, ohne dass dieser vom Browser interpretiert und dargestellt wird. Die enthaltenen Elemente bleiben dabei inaktiv und werden nicht gerendert, bis sie ganz explizit aufgerufen werden. Dadurch haben sie keinen negativen Effekt auf die Ladezeit einer Webseite. Der <template>-Tag wird verwendet, wenn HTML-Strukturen mehrfach verwendet, sie aber nicht aktuellen DOM hinzugefügt werden sollen.

Bibliotheken für Web Components

Wenn Sie damit beginnen, Web Components einzusetzen, müssen Sie das Rad nicht komplett neu erfinden. Im Web finden sich viele Bibliotheken mit Vorlagen und Beispielen für Webkomponenten, die Ihnen den Einstieg in die Nutzung von Web Components erleichtern:

• Lit Element: einfache Basisklasse für die Erstellung von Web Components
• Polymer Project: Google bietet in seinem Polymer-Projekt Tools für die Kreation von Custom Elements; etwa ein Starterkit, um Apps mit Web Components zu programmieren, oder eine HTML-Template-Bibliothek für JavaScript
• Hybrids: simple UI-Bibliothek zur Entwicklung von Web Components
• Slim.js: Bibliothek mit erweiterten Eigenschaften für Web Components
• Stencil: Compiler zur Generierung von Custom Elementes

Fazit: Unabhängig, schnell und wiederverwendbar – nutzen Sie Web Components!

Web Components bieten eine Art Plugin-System für Websites und Webanwendungen, mit deren Hilfe Komponenten einheitlich integriert und über mehrere Projekte hinweg genutzt werden können. Durch die verkapselte Isolierung ihrer Bestandteile entstehen dabei keine Konflikte mit bestehenden Elementen. Und das ganz einfach aus dem Browser heraus, unabhängig vom jeweiligen Hersteller oder vom genutzten Framework.

Web Components sind mittlerweile also ein entscheidender Baustein des modularen Webs, das nicht nur Menschen kennen sollten, die sich sonst täglich mit Programmiersprachen und DevOps befassen!

Titelbild: Tirza van Dijk / unsplash