Web Components
Eine Gruppe von Webstandards zum Bau wiederverwendbarer, gekapselter, framework-unabhängiger HTML-Elemente. Der Sammelbegriff umfasst drei Teile: Custom Elements (eigene Tags), Shadow DOM (Kapselung) und HTML Templates. Eine standardbasierte Alternative zu Framework-Komponenten.
Die drei Säulen: Custom Elements — eigene Elemente (<my-card>) mit eigener JS-Logik und eigenem Lebenszyklus definieren; Shadow DOM — dem Element einen gekapselten, isolierten DOM- und Stilbaum geben, sodass sein CSS nicht nach außen dringt und das CSS der Seite nicht hineinwirkt; HTML Templates (<template>) — inerte Auszeichnung, die bei Bedarf geklont wird. Der Gewinn: Komponenten, die in jedem Framework laufen (oder ganz ohne), mit echter Kapselung, aufgebaut auf Webstandards, die nicht veralten. Einsatzfälle: teamübergreifende Design-Systeme (Shoelace, Adobe Spectrum), einbettbare Widgets. Nachteil: umständlicher als ein Framework für App-Entwicklung, und das Ökosystem ist kleiner. Bibliotheken wie Lit machen das Schreiben angenehmer.