Mit Ja­va­Script Frame­works wie React und Angular können Ent­wick­ler schon lange wie­der­ver­wend­ba­re Web-Elemente de­fi­nie­ren. Jedoch nutzt jedes Framework einen anderen Standard, was den pro­jekt­über­grei­fen­den Einsatz der prak­ti­schen Code-Schnipsel in vielen Fällen ver­hin­dert. Abhilfe schaffen die so­ge­nann­ten Web Com­pon­ents, bei denen es sich um wie­der­ver­wend­ba­re HTML-Kom­po­nen­ten handelt, die un­ab­hän­gig vom Framework ein­setz­bar sind. Der 2012 stan­dar­di­sier­te Web-Elemente-Typ wird mitt­ler­wei­le von jedem gängigen Browser un­ter­stützt.

Was sind Web Com­pon­ents?

Web Com­pon­ents sind Code-Blöcke, die den inneren Aufbau von HTML-Elementen inklusive CSS und Ja­va­Script kapseln und er­mög­li­chen, den je­wei­li­gen Code an be­lie­bi­ger Stelle in Websites und Web-Apps zu nutzen. Ent­wi­ckelt wurde das Konzept von einer Ar­beits­grup­pe des World Wide Web Con­sor­ti­um (W3C), das 1994 vom We­ber­fin­der Tim Berners-Lee gegründet wurde und sich seitdem intensiv für eine Stan­dar­di­sie­rung aller ele­men­ta­ren Web­tech­no­lo­gien einsetzt. Das 2012 als Standard ver­öf­fent­lich­te Web-Com­pon­ents-Modell sieht primär folgende vier Spe­zi­fi­ka­tio­nen für die Er­stel­lung der nütz­li­chen HTML-Kom­po­nen­ten vor:

  • Custom Elements: Satz von Ja­va­Script-APIs zur De­fi­ni­ti­on be­nut­zer­de­fi­nier­ter Elemente
  • Shadow DOM: Satz von Ja­va­Script-APIs zum Hin­zu­fü­gen von DOM-Elementen
  • ES Modules: Module für die Ein­bin­dung und Wie­der­ver­wen­dung von Ja­va­Script-Do­ku­men­ten
  • HTML-Templates: Mark-up-Vorlagen, die auf der dar­ge­stell­ten Seite nicht ab­ge­bil­det werden und als Grundlage für be­nut­zer­de­fi­nier­te Elemente verwendet werden können

Der Web-Com­pon­ents-Standard wird mitt­ler­wei­le von allen gängigen Browsern un­ter­stützt. Um mit den ge­kap­sel­ten HTML-Codes zu arbeiten, lassen sich alle Ja­va­Script-Frame­works bzw. -Bi­blio­the­ken nutzen, die mit HTML arbeiten.

Warum sollte man Web Com­pon­ents nutzen?

Bi­blio­the­ken und Frame­works wie Angular oder jQuery zählen seit Jahren zu den wich­tigs­ten Ar­beits­mit­teln eines jeden Web-Pro­gram­mie­rers. Doch so praktisch und viel­sei­tig diese Code-Grund­ge­rüs­te, die eine Menge Arbeit bei der Ent­wick­lung von Projekten ersparen, auch sind, so un­fle­xi­bel zeigen sie sich häufig, wenn es um eine pro­jekt­über­grei­fen­de Nutzung geht. Nicht selten müssen Ent­wick­ler Code neu schreiben bzw. um­schrei­ben, wenn bei­spiels­wei­se ein Framework-Wechsel ansteht. Aus diesem Grund führte das World Wide Web Con­sor­ti­um (W3C) Web Com­pon­ents und damit einen uni­ver­sel­len Rahmen für die einfache und über­grei­fen­de Wie­der­ver­wen­dung von HTML-, CSS- und Ja­va­Script-Code ein.

Da die uni­ver­sel­len Web-Elemente sich durch eine einfache, schnell zu lernende Syntax aus­zeich­nen, pro­fi­tie­ren auch Pro­gram­mier­an­fän­ger von dem W3C-Standard. In den letzten Jahren arbeitet Google im Rahmen des „Polymer Projects“ daran, Bi­blio­the­ken und Templates für die Pro­gram­mie­rung von Web Com­pon­ents zu ent­wi­ckeln und frei zur Verfügung zu stellen.

Die Web-Com­pon­ents-Be­stand­tei­le im Überblick

Das Web-Com­pon­ents-Modell stützt sich grund­sätz­lich auf vier Spe­zi­fi­ka­tio­nen, auf die wir im Folgenden näher eingehen. Zudem geben wir einige konkrete Beispiele für die Web-Com­pon­ents-Spe­zi­fi­ka­tio­nen.

Custom Elements

Custom Elements (be­nut­zer­de­fi­nier­te Elemente) sind HTML-Tags, die den Inhalt von HTML inklusive CSS-An­wei­sun­gen und Skripten kapseln. Sie werden in der Cus­tom­Ele­ment­Re­gis­try de­kla­riert. Ihre wich­tigs­ten Merkmale sind:

  • Sie enden mit einem schlie­ßen­den Tag.
  • Ihr Name ist ein DOM-String und enthält immer einen Bin­de­strich.
  • Ihr Name darf innerhalb der Cus­tom­Ele­ment­Re­gis­try nur einmal vorkommen.

Um ein Custom Element zu kreieren, benötigen Sie Ja­va­Script und die Methode define. Folgendes Web-Com­pon­ents-Beispiel zeigt ex­em­pla­risch ein Custom Element, mit dessen Hilfe sich ein in­di­vi­du­el­ler Button einbinden lässt:

customElements.define('mein-button', MeinButton, { extends: 'p' });

Um dieses Element nun in einer Web­an­wen­dung nutzen zu können, reicht folgender Code:

<mein-button></mein-button>

Shadow DOM

Die wich­tigs­te Ei­gen­schaft von Web Com­pon­ents ist ihre Fähigkeit, HTML-Elemente zu kapseln. Die Shadow-DOM-API hilft Ihnen dabei, indem sie er­mög­licht, einem Do­ku­men­ten­baum ver­steck­te DOM-Bäume an­zu­hän­gen. Dabei ist aus­schließ­lich das HTML-Tag des Shadow DOMs sichtbar. Damit können Sie das ver­steck­te DOM um HTML-Elemente erweitern, ohne jedes Mal auch das Haupt-DOM verändern zu müssen. Aus­führ­li­che­re In­for­ma­tio­nen zu dieser Technik sowie konkrete An­wen­dungs­bei­spie­le finden Sie in unserem Artikel über Shadow Doms und ihre Funk­ti­ons­wei­se.

ES Modules

ES Modules sind Module, die Objekte, Funk­tio­nen oder Variablen aus einer Ja­va­Script-Datei ex­por­tie­ren. Diese Ei­gen­schaft er­mög­licht es, Variablen innerhalb einer Datei sinnvoll in Gruppen zu un­ter­tei­len und sie zu re­fe­ren­zie­ren. Derzeit gibt es zwei ES-Modul-Systeme. Während CommonJS ur­sprüng­lich Node.JS gehörte, ist das neuere System bereits in Ja­va­Script ES6 enthalten.

Um eine Funktion aus einer Ja­va­Script-Bi­blio­thek zu ex­por­tie­ren, nutzen Sie die Methode export. In dem Beispiel ex­por­tie­ren Sie eine Funktion, die einen In­put­string zweimal wie­der­gibt.

// ? lib.bib1
export const wiederhole = (string) => `${string} ${string}`;
}

Via import können Sie die ex­por­tier­te 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 ent­hal­te­nen Elemente bleiben dabei solange inaktiv und un­ger­en­dert, bis sie explizit auf­ge­ru­fen werden. Durch diese Ei­gen­schaft haben sie keinen negativen Effekt auf die Ladezeit einer Webseite. Sie stellen daher eine sinnvolle Al­ter­na­ti­ve zu den her­kömm­li­chen Ja­va­Script-Methoden dar.

Mit dem Tag <template> de­fi­nie­ren 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 Ja­va­Script-Methoden ge­t­Ele­ment­by­Id 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 Com­pon­ents?

Die vor­ge­stell­ten Beispiele für Web Com­pon­ents funk­tio­nie­ren nur, indem Sie die einzelnen Be­stand­tei­le des Web-Com­pon­ents-Modells mit­ein­an­der kom­bi­nie­ren. Folgendes Schema stellt die Vor­ge­hens­wei­se ver­ein­facht dar:

  1. Erzeugen Sie eine Ja­va­Script-Klasse oder -Funktion oder ex­por­tie­ren Sie sie aus einer be­stehen­den Ja­va­Script-Datei mithilfe von ES Modules.
  2. De­kla­rie­ren Sie Ihr neues Custom Element mit der Methode Cus­tom­Ele­ment­Re­gis­try.define().
  3. Wenn nötig bzw. gewünscht, hängen Sie ein ver­steck­tes Shadow DOM an, um Ihrem Custom Element Kind-Elemente hin­zu­zu­fü­gen.
  4. De­fi­nie­ren Sie ein HTML-Template mit den Tags <template> und <slot>.
  5. Verwenden Sie das erzeugte Custom Element innerhalb Ihrer Webseite wie ein ge­wöhn­li­ches HTML-Element.

Folgendes Tutorial bietet Ihnen einen einfachen Einstieg in die Pro­gram­mie­rung von Web Com­pon­ents:

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

Kom­pa­ti­bi­li­tät von Web Com­pon­ents mit den ver­schie­de­nen Brow­ser­ver­sio­nen

Die Kom­pa­ti­bi­li­tät von Web Com­pon­ents war in früheren Brow­ser­ver­sio­nen noch nicht gegeben. In­zwi­schen un­ter­stüt­zen jedoch alle gängigen Browser Custom Elements, Shadow DOM, ES Modules und HTML-Templates. Die folgende Tabelle bietet eine Kom­pa­ti­bi­li­täts­über­sicht der ver­schie­de­nen Web Com­pon­ents.

Kom­pa­ti­bel? 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

Bi­blio­the­ken, Vorlagen und Beispiele für Web Com­pon­ents

Gerade als Anfänger gestaltet sich die Pro­gram­mie­rung von Web Com­pon­ents mitunter kom­pli­ziert. Im Web finden Sie jedoch zahl­rei­che Bi­blio­the­ken mit Vorlagen und Stan­dard­funk­tio­nen sowie prak­ti­sche Beispiele für Web Com­pon­ents, die Ihnen die Arbeit er­leich­tern.

  • Lit Element: einfache Basis-Klasse zur Kreation von Web Com­pon­ents
  • Polymer Project: Im Rahmen des Polymer-Projekts bietet Google diverse Tools für die Arbeit mit Web Com­pon­ents – u. a. ein Star­ter­kit, um Apps mit Web Com­pon­ents zu pro­gram­mie­ren, eine HTML-Template-Bi­blio­thek für Ja­va­Script sowie ver­schie­dens­te ein­satz­fer­ti­ge Elemente.
  • Hybrids: stellt einfache UI-Bi­blio­thek zur Er­stel­lung von Web Com­pon­ents zur Verfügung
  • Slim.js: Bi­blio­thek mit er­wei­ter­ten Ei­gen­schaf­ten für Web Com­pon­ents, die auf klas­sen­ba­sier­te Vererbung von Ja­va­Script ES6 zu­rück­greift
Zum Hauptmenü