Web Components sind ein Satz von nativen Browser-APIs zum Erstellen wiederverwendbarer, gekapselte custom HTML-Elemente — framework-agnostisch und standardisiert. Drei Technologien arbeiten zusammen:
Web Components sind ein Satz von nativen Browser-APIs zum Erstellen wiederverwendbarer, gekapselte custom HTML-Elemente — framework-agnostisch und standardisiert. Drei Technologien arbeiten zusammen:
<template>, <slot>) — inert, wiederverwendbares Markup.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
Die Stile innerhalb des shadow root sind scoped — das CSS der Seite kann nicht eindringen, und das CSS der Komponente kann nicht austreten. Dies löst das Global-CSS-Problem nativ:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components lassen Sie wiederverwendbare Widgets erstellen, die in jedem Framework (oder keinem) mit echter Stil-/DOM-Kapselung funktionieren — ideal für Design Systems und Micro-Frontends, die über Teams mit unterschiedlichen Stacks hinweg geteilt werden.
So versenden Bibliotheken wie Shoelace framework-agnostische Komponenten.
Die Kompromisse (ausführliche API, SSR/Styling-Komplexität) bedeuten, dass App-Entwickler immer noch oft React/Vue bevorzugen, aber das Plattform-Primitiv ist mächtig und standardisiert.