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:
- 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.
Folgendes Tutorial bietet Ihnen einen einfachen Einstieg in die Programmierung von Web Components:
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
Ähnliche Artikel
BEST-BACKGROUNDSShutterstock Less CSS: Vorstellung und Tutorial
CSS zählt zu den wichtigsten Sprachen im World Wide Web. Die Arbeit mit der Stylesheet-Sprache ist jedoch häufig unnötig umständlich, weshalb viele Entwickler stattdessen lieber Less nutzen. Der CSS-Präprozessor vereinfacht nicht nur das Schreiben des Stylesheet-Codes, sondern erweitert CSS auch um verschiedene Features wie Variablen, Funktionen oder Mixins. Wie das funktioniert, verrät unser…
Bootstrap-Alternativen: Die besten Frontend-Frameworks im Überblick
Bootstrap gilt als die beliebteste Framework-Lösung zur Konzeption und Kreation funktionsstarker Weboberflächen. Die Sammlung aus HTML-, CSS- und JavaScript-Komponenten, die Twitter im Jahr 2011 unter der freien MIT-Lizenz veröffentlichte, erfreut sich ohne Zweifel einer großen Community sowie einer Vielzahl an Erweiterungen, Schnittstellen zu Content-Management-Systemen und vorgefertigten Themes.…
REDPIXEL.PLShutterstock Internet-Programmiersprachen: Die besten Sprachen fürs Web
Sie wollen eine oder gleich mehrere Web-Programmiersprachen lernen? Die erste Herausforderung ist, sich für eine zu entscheiden. Schließlich gibt es hunderte Programmiersprachen – doch nicht alle eignen sich für die Webentwicklung. Damit Ihnen die Entscheidung leichter fällt und Sie Ihr Webprojekt angehen können, stellen wir Ihnen die bekanntesten Internet-Programmiersprachen kurz vor.
spainter_vfxShutterstock Reverse Engineering einer Software
Das Reverse Engineering von Software kann helfen, deren Funktionsweise und Struktur aufzudecken und verstehen zu lernen. Durch die „Rückentwicklung“ einer Software bis hin zum Quellcode ist es nicht nur möglich Fehlmeldungen zu ergründen, sondern auch Konkurrenzprogramme zu analysieren. Reverse Engineering ist daher vielseitig einsetzbar. Doch wie genau wird Reverse Engineering im Software-Bereich…
Polyfills: Code-Bausteine für moderne Web-Features
Websites und -Apps unterliegen einem stetigen Wandel. Neue Features und Funktionen versprechen oft ein hochwertigeres, sichereres oder besser performendes Webprojekt, weshalb ihre Implementierung häufig reine Formsache ist. Viele Browser hinken allerdings deutlich hinterher, wenn es um den Support moderner Web-Technologien geht – ein Problem, dem Sie mit den sogenannten Polyfills entgegensteuern…
