# Web Components erklärt Mit [JavaScript Frameworks](https://www.ionos.at/digitalguide/websites/web-entwicklung/beliebte-javascript-frameworks-und-bibliotheken/ "Beliebte JavaScript-Frameworks und -Bibliotheken") wie [React und Angular](https://www.ionos.at/digitalguide/websites/web-entwicklung/angular-vs-react/ "Angular vs. React") 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-tutorial-einbindung-und-erste-schritte/ "jQuery-Tutorial: Einbindung und erste Schritte") 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“](https://www.polymer-project.org/ "Polymer Projekt") 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: ```none customElements.define('mein-button', MeinButton, { extends: 'p' }); ``` Um dieses Element nun in einer Webanwendung nutzen zu können, reicht folgender Code: ```none ``` ### 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-der-shadow-dom/ "Was ist der Shadow DOM?"). ### 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](https://www.ionos.at/digitalguide/websites/web-entwicklung/einfuehrung-in-nodejs/ "Einführung in Node.js") gehörte, ist das neuere System bereits [in JavaScript ES6](https://www.w3schools.com/js/js_es6.asp "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. ```none // ? lib.bib1 export const wiederhole = (string) => `${string} ${string}`; } ``` Via *import* können Sie die exportierte Funktion nun beliebig oft aufrufen. ```none 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></template>* definieren Sie ein HTML-Template. Im folgenden Beispiel erzeugen Sie ein Template namens „Mein Element“. ```none ``` 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. ```none 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></template>* und *<slot>.</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: [YouTube video](https://www.youtube.com/watch?v=mTNdTcwK3MM)## 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](https://github.com/Polymer/lit-element "GitHub-Repository von Lit Element"): einfache Basis-Klasse zur Kreation von Web Components - [Polymer Project](https://www.polymer-project.org/ "Homepage des Polymer-Projekts"): 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](https://github.com/hybridsjs/hybrids "Hybrids-Projekt auf der Entwicklerplattform GitHub"): stellt einfache UI-Bibliothek zur Erstellung von Web Components zur Verfügung - [Slim.js](https://slimjs.com/ "Slim.js"): Bibliothek mit erweiterten Eigenschaften für Web Components, die auf **klassenbasierte Vererbung** von **JavaScript ES6** zurückgreift This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/web-components/](https://www.ionos.at/digitalguide/websites/web-entwicklung/web-components/) for AI/LLM consumption.