Webkomponenten werden immer häufiger browserübergreifend unterstützt, die Community wächst stetig und es gibt einen brandneuen Katalog für Webkomponenten, mit dem Sie genau die Komponenten finden, die Sie benötigen.
Wollten Sie schon immer Ihre eigene eigenständige JavaScript-Komponente erstellen, die Sie problemlos in mehreren Projekten verwenden oder mit anderen Entwicklern teilen können, unabhängig davon, welches JavaScript-Framework sie verwenden? Dann könnten Webkomponenten das Richtige für euch sein.
Webkomponenten sind eine Reihe neuer Webplattformfunktionen, mit denen Sie Ihre eigenen HTML-Elemente erstellen können. Jedes neue benutzerdefinierte Element kann ein benutzerdefiniertes Tag wie <my-button> und alle Vorteile von integrierten Elementen haben. Benutzerdefinierte Elemente können Eigenschaften und Methoden haben, Ereignisse auslösen und auf Ereignisse reagieren. Sie haben sogar einen gekapselten Stil und DOM-Bäume, um ihr eigenes Erscheinungsbild zu verleihen.
Durch die Bereitstellung eines plattformbasierten, Low-Level-Komponentenmodells können Sie mit Webkomponenten wiederverwendbare Elemente für alles erstellen und freigeben, von speziellen Schaltflächen bis hin zu komplexen Ansichten wie Datumsauswahl. Da Webkomponenten mit Plattform-APIs erstellt werden, die leistungsstarke Verkapselungs-Primitive enthalten, können Sie diese Komponenten sogar in anderen JavaScript-Bibliotheken oder -Frameworks verwenden, als wären sie Standard-DOM-Elemente.
Sie haben vielleicht schon von Webkomponenten gehört. Diese sind eine frühe Version der Webkomponenten-Spezifikation v0, die in Chrome 33 ausgeliefert wurde.
Dank der breiten Zusammenarbeit zwischen den Browseranbietern wird die nächste Generation der Webkomponenten-Spezifikation – v1 – heute weithin unterstützt. Chrome unterstützt seit Chrome 53 bzw. Chrome 54 die beiden wichtigsten Spezifikationen, aus denen Webkomponenten bestehen: ShadowDOM und benutzerdefinierte Elemente. Safari bietet Unterstützung für Shadow DOM v1 in Safari 10 und hat die Implementierung von Custom Elements v1 in WebKit abgeschlossen. In Firefox werden derzeit ShadowDOM und Custom Elemente (Version 1) entwickelt. Für Edge sind sowohl Shadow DOM als auch Custom Elemente geplant.
Um ein neues benutzerdefiniertes Element mithilfe der v1-Implementierung zu definieren, erstellen Sie einfach eine neue Klasse, die HTMLElement mithilfe der ES6-Syntax erweitert, und registrieren sie im Browser:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Die neuen Spezifikationen von V1 sind extrem leistungsstark. Für den Einstieg haben wir Anleitungen zur Verwendung von Custom Elements V1 und Shadow DOM v1 zusammengestellt.
webcomponents.org
Die Web Component-Community wächst ebenfalls sprunghaft. Wir freuen uns über die Einführung der aktualisierten Website webcomponents.org mit dem Mittelpunkt der Webkomponenten-Community. Sie umfasst einen integrierten Katalog für Entwickler, über den sie ihre Elemente teilen können.
Die Website webcomponents.org enthält Informationen zu den Spezifikationen für Webkomponenten, Updates und Inhalten aus der Web Components-Community sowie Dokumentationen für Open-Source-Elemente und Sammlungen von Elementen, die von anderen Entwicklern erstellt wurden.
Sie können zum Erstellen Ihres ersten Elements mit einer Bibliothek wie Polymer von Google beginnen oder einfach die Low-Level-Web Component APIs direkt verwenden. Veröffentlichen Sie Ihr Element dann auf webcomponents.org.
Viel Spaß beim Komponentenisieren!