Web Components

Kurz: Web Components sind eigene HTML-Elemente, die der Browser von Haus aus unterstützt, ohne ein Framework. Man definiert zum Beispiel <mein-knopf> und verwendet es überall.

Genauer: Dahinter stehen drei Browser-Techniken: Custom Elements (eigene Tags mit eigener Logik), Shadow DOM (abgeschottetes Markup und Styling) und HTML-Templates (Vorlagen). Zusammen ergeben sie wiederverwendbare Bausteine.

Im Detail

• Custom Element: Eine Klasse, die von HTMLElement erbt und mit customElements.define("mein-knopf", Klasse) registriert wird. Namen müssen einen Bindestrich enthalten.
• Shadow DOM: CSS von außen wirkt nicht hinein und umgekehrt. Das verhindert Stil-Kollisionen.
• Lebenszyklus: connectedCallback, disconnectedCallback, attributeChangedCallback.
• Vorteil: Läuft in jedem Framework und ohne Build-Schritt.
• Nachteil: Server-Rendering und Formulare sind umständlicher als in Frameworks.

Siehe auch: Semantisches HTML