Web Components sind eine Sammlung standardisierter Browser-Technologien, mit denen sich eigene, wiederverwendbare HTML-Elemente definieren lassen. Statt für jede UI-Komponente ein Framework zu benötigen, schreibt man ein selbst gebautes Element wie <mein-button> – und kann es überall im HTML einsetzen.
Die drei Bausteine
- Custom Elements: Eigene Tags, deren Verhalten eine JavaScript-Klasse definiert – mit Lebenszyklus-Methoden wie
connectedCallback. - Shadow DOM: Ein gekapselter DOM-Baum, dessen CSS und Markup nicht nach außen leaken – Styles von außen können das Element nicht ungewollt verändern.
- HTML Templates: Das
<template>-Element hält Markup bereit, das erst beim Einfügen in die Seite aktiviert wird.
Vorteile
- Kapselung: Styles und Logik einer Komponente bleiben sauber getrennt – das verhindert CSS-Konflikte in großen Projekten.
- Framework-unabhängig: Web Components funktionieren in Vanilla-JavaScript, aber auch neben JSX-basierten Ansätzen wie React oder Vue.
- Standard statt Bibliothek: Kein zusätzliches Framework nötig – der Browser liefert die API nativ (ähnlich wie bei WebAssembly als offenem Standard).
Praxis-Beispiel
class MeinButton extends HTMLElement {
connectedCallback() {
this.innerHTML = "<button>Klick mich</button>";
}
}
customElements.define("mein-button", MeinButton);Danach ist <mein-button></mein-button> überall im Markup verfügbar – in klassischen Seiten, in einer SPA oder in einer PWA. Mit TypeScript lassen sich die Element-Klassen zusätzlich typsicher machen.
Wann Web Components sinnvoll sind
Für wiederverwendbare Bausteine über mehrere Projekte hinweg, für Design-Systeme und überall dort, wo man nicht an ein bestimmtes Framework gebunden sein möchte. Wer mit einer API-getriebenen Komponentenbibliothek arbeitet, profitiert von der Langlebigkeit des Standards.