Was ist Web Components
Standard für wiederverwendbare UI-Komponenten
Web Components ist ein Satz von Webstandards zur Erstellung wiederverwendbarer benutzerdefinierter HTML-Elemente mit gekapselter Funktionalität.
Kerntechnologien
- Custom Elements — Erstellung eigener HTML-Tags
- Shadow DOM — Stil- und Markup-Kapselung
- HTML Templates — wiederverwendbare Vorlagen
- ES Modules — modulares Laden von Komponenten
Vorteile
- Funktionieren ohne Frameworks
- Kompatibel mit allen Browsern
- Stil-Kapselung
- Projektübergreifend wiederverwendbar
Beispiel
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
Bibliotheken
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)