Web Components sind sozusagen wiederverwendbare HTML-Komponenten, die unabhängig vom Framework einsetzbar sind. Diese Komponenten sind Code-Blöcke, welche alles in einem haben. Sprich sie bestehen aus den HTML-Elementen & den gazugehörigen CSS und JavaScript Modellierungen. Diese ermöglichen es sie an beliebieger Stelle in Websites und Web-Apps einzusetzen.
Entwickelt wurde das vom World Wide Web Consortium (W3C) und hat vier Spezifikationen für die Erstellung:
- Custom Elements:
- Eine Sammlung von JavaScript-API's um benutzerdefinierte Elemente zu definieren.
- Shadow DOM:
- Eine Sammlung von JavaScript-API's zum Erzeugen gekapselter DOM-Subtrees.
- ES Modules:
- Um JavaScript-Funktionen und -Dokumente einfacher wiederzuverwenden werden ES-Module für die Einbindung eingesetzt. Wie bspw. die elements - Web Components Library.
- HTML-Templates:
- Sind Mark-up-Vorlagen, die auf der dargestellten HTML-Seite nicht angezeigt werden. Somit können sie als Grundlage für eigene benutzerdefinierte Elemente verwendet werden.
Solche Web-Components gibt es auch von Inovex. Und zwar die elements - Web Components:
elements.inovex
Wenn du eigene Web Components entwickeln willst, kannst du hier ein Web Components Tutorialmachen.