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

Der Web-Components-Standard wird mittlerweile von allen gängigen Browsern unterstützt. Um mit den gekapselten HTML-Codes zu arbeiten, lassen sich alle JavaScript-Frameworks bzw. -Bibliotheken nutzen, die mit HTML arbeiten.

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.

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.

Um ein Custom Element zu kreieren, benötigen Sie JavaScript und die Methode define. Folgendes Web-Components-Beispiel zeigt exemplarisch ein Custom Element, mit dessen Hilfe sich ein individueller Button einbinden lässt:

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.

// ? 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“. 

<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:

  1. Erzeugen Sie eine JavaScript-Klasse oder -Funktion oder exportieren Sie sie aus einer bestehenden JavaScript-Datei mithilfe von ES Modules.
  2. Deklarieren Sie Ihr neues Custom Element mit der Methode CustomElementRegistry.define().
  3. Wenn nötig bzw. gewünscht, hängen Sie ein verstecktes Shadow DOM an, um Ihrem Custom Element Kind-Elemente hinzuzufügen.
  4. Definieren Sie ein HTML-Template mit den Tags <template> und <slot>.
  5. Verwenden Sie das erzeugte Custom Element innerhalb Ihrer Webseite wie ein gewöhnliches HTML-Element.

Folgendes Tutorial bietet Ihnen einen einfachen Einstieg in die Programmierung von Web Components:

mTNdTcwK3MM.jpg Zur Anzeige dieses Videos sind Cookies von Drittanbietern erforderlich. Ihre Cookie-Einstellungen können Sie hier aufrufen und ändern.

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
War dieser Artikel hilfreich?