Webkomponenten werden immer mehr browserübergreifend unterstützt, die Community wächst rasant und es gibt einen brandneuen Webkomponentenkatalog, in dem Sie genau die Komponente finden, die Sie benötigen.
Haben Sie schon einmal daran gedacht, eine eigene eigenständige JavaScript-Komponente zu erstellen, die Sie problemlos in mehreren Projekten verwenden oder mit anderen Entwicklern teilen können, unabhängig davon, welches JavaScript-Framework sie verwenden? Webkomponenten sind dann die richtige Wahl.
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> haben und alle Vorteile von integrierten Elementen bieten. Benutzerdefinierte Elemente können Eigenschaften und Methoden haben, Ereignisse auslösen und darauf reagieren und sogar einen gekapselten Stil und DOM-Baum haben, um ein eigenes Erscheinungsbild zu haben.
Webkomponenten bieten ein plattformbasiertes, Low-Level-Komponentenmodell, mit dem Sie wiederverwendbare Elemente für alles von speziellen Schaltflächen bis hin zu komplexen Ansichten wie Datumsauswahlen erstellen und freigeben können. Da Webkomponenten mit Plattform-APIs erstellt werden, die leistungsstarke Primitive zur Kapselung enthalten, können Sie diese Komponenten auch in anderen JavaScript-Bibliotheken oder ‑Frameworks verwenden, als wären sie Standard-DOM-Elemente.
Möglicherweise haben Sie schon einmal von Web Components gehört. Eine frühe Version der Web Components-Spezifikation (v0) wurde in Chrome 33 eingeführt.
Dank der breiten Zusammenarbeit zwischen Browseranbietern wird die Web Components-Spezifikation der nächsten Generation (Version 1) immer stärker unterstützt. Chrome unterstützt die beiden wichtigsten Spezifikationen für Webkomponenten – Shadow DOM und benutzerdefinierte Elemente – seit Chrome 53 bzw. Chrome 54. Safari unterstützt Shadow DOM v1 in Safari 10 und hat die Implementierung von benutzerdefinierten Elementen v1 in WebKit abgeschlossen. In Firefox werden derzeit Shadow DOM und Custom Elements v1 entwickelt. Sowohl Shadow DOM als auch Custom Elements sind auf der Roadmap für Edge.
Wenn Sie ein neues benutzerdefiniertes Element mit der V1-Implementierung definieren möchten, erstellen Sie einfach eine neue Klasse, die HTMLElement mit der ES6-Syntax erweitert, und registrieren Sie sie beim Browser:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Die neuen V1-Spezifikationen sind äußerst leistungsfähig. Wir haben Anleitungen zur Verwendung von Custom Elements V1 und Shadow DOM V1 zusammengestellt, um Ihnen den Einstieg zu erleichtern.
webcomponents.org
Auch die Web Component-Community wächst rasant. Wir freuen uns, die aktualisierte Website webcomponents.org vorstellen zu können. Diese Website ist der Mittelpunkt der Web Components-Community und enthält einen integrierten Katalog, in dem Entwickler ihre Elemente teilen können.
Die Website webcomponents.org enthält Informationen zu den specs für Web-Komponenten, Updates und Inhalte der Web-Komponenten-Community sowie Dokumentationen zu Open-Source-Elementen und Elementsammlungen, die von anderen Entwicklern erstellt wurden.
Sie können Ihr erstes Element mit einer Bibliothek wie Polymer von Google erstellen oder direkt die Low-Level-Web Component APIs verwenden. Veröffentlichen Sie Ihr Element dann auf webcomponents.org.
Viel Spaß beim Erstellen von Komponenten!