Webkomponenten Teil 1: Erkundung wiederverwendbarer Webkomponenten

Die Webentwicklung entwickelt sich sehr schnell, und es entstehen ständig neue Frameworks und Technologien. Sowohl Entwickler als auch Browser brauchen Zeit, um die Änderungen zu unterstützen.

Web Components ist eine Reihe von verschiedenen Technologien, die bei dieser Herausforderung helfen.

Indem sie Entwicklern die Möglichkeit geben, wiederverwendbare benutzerdefinierte Elemente zu erstellen, machen Web Components das Leben für Entwickler einfacher. Sie können sie mit jedem JavaScript-Framework verwenden, und es ist sehr einfach, sie in Ihre HTML-Seiten einzubinden.

Benutzerdefinierte Elemente werden von allen wichtigen Browsern unterstützt. Aus Gründen der Abwärtskompatibilität ist es möglich, eine JavaScript-Bibliothek einzubinden, die ihre Verwendung in älteren Browsern ermöglicht.

In diesem Beitrag werde ich die verschiedenen Technologien rund um Webkomponenten anhand von testgetriebener Entwicklung (TDD) untersuchen. Als Beispiel werde ich ein grundlegendes benutzerdefiniertes Element erstellen, das ich als Komponente bezeichne. Der Code und der Commit-Verlauf sind auf GitHub verfügbar, sodass Sie meine Schritte leicht nachvollziehen können.

In einem Folgebeitrag werde ich diese Komponente auf einer Seite verwenden, um einen echten JCR-Arbeitsbereich zu durchsuchen und dabei einen Client zu verwenden, der sich mit MagnoliasREST-API verbindet.

Ich habe eine neue Komponente, eine Testseite und eine Node-Paketkonfiguration mit npm erstellt. Sie können einen Blick auf die Änderungen in diesem Commit werfen.

Ich habe die Bibliothek web-component-tester gewählt, um die Komponente richtig zu testen. Sie scheint nicht sehr aktiv zu sein, aber sie erledigt die Aufgabe gut und braucht fast keine Konfiguration.

In diesem Blog werde ich die drei Haupttechnologien von Web Components untersuchen:

- HTML-Vorlagen

- Schatten-DOM

- Benutzerdefinierte Elemente

HTML-Vorlagen sind hilfreich bei der Erstellung der Struktur einer Webkomponente.

Sie werden mit dem Tag <template> definiert und enthalten ein Stück HTML, das mit Hilfe von JavaScript auf der Seite angezeigt und wiederverwendet werden kann. Eine Vorlage kann auch Stile enthalten. Der HTML-Standard bietet jedoch keinen Mechanismus zur seitenübergreifenden Verwendung einer Vorlage.

Das heißt, wenn Sie mit einer Vorlage in einer Webkomponente arbeiten, müssen Sie sicherstellen, dass die Vorlage auf der Seite definiert ist, die die Webkomponente verwendet.

Um eine Vorlage in meiner Komponente zu verwenden, habe ich zunächst innerHTML durch eine HTML-Vorlage ersetzt, wie Sie in diesem Commit sehen können.

In dieser Version meiner Vorlage ist die Ersetzung von Variablen noch nicht möglich. Da die Vielseitigkeit dieser Vorlagen nicht so gut ist wie bei anderen Vorlagenbibliotheken wie Moustache oder Handlebars, habe ich eine Variable als <span>-Tag eingeführt und ihr dann einen Wert zugewiesen. Um zu sehen, wie ich das gemacht habe, können Sie sich mein Commit ansehen.

Um die Kapselung der Komponente zu verbessern, habe ich die Shadow-DOM-API verwendet und ihr ein separat gerendertes Document Object Model (DOM) beigefügt:

Durch die Trennung der Komponente vom Haupt-HTML wird die Komponente nicht durch Änderungen am Stil der Seite beeinträchtigt. Dieser Ansatz funktioniert auch gut für Vorlagen. Stile in der Vorlage wirken sich nur auf die Komponente und nicht auf den Rest der Seite aus.

Dieses Beispiel zeigt, dass sich Änderungen an den Seitenstilen nicht auf die Komponenten auswirken.

Benutzerdefinierte Elemente sind die JavaScript-APIs, die die Grundlage für Webkomponenten bilden. Sie werden mit customElements definiert. Das JavaScript-Objekt HTMLElement ist die Objektbasis, die ich erweitere. Es hat einen Konstruktor, den Sie überschreiben können. Denken Sie einfach daran, super aufzurufen, wenn Sie fertig sind.

Ein Element hat auch mehrere Lebenszyklus-Callbacks, die in verschiedenen Phasen des Lebenszyklus eines Elements ausgelöst werden.

Ich habe connectedCallback verwendet, das aufgerufen wird, wenn die Komponente mit dem DOM verbunden ist. disconnectedCallback ist hilfreich, wenn Sie Ressourcen freigeben oder Verbindungen schließen wollen; und attributeChangedCallback ist sehr interessant, weil es Ihnen erlaubt, auf Änderungen im Zustand des Elements zu reagieren.

Definieren wir die Zustände des Elements wie folgt:

-! #Loading während eines AJAX-Aufrufs in der Komponente

-! #Error wenn ein AJAX-Aufruf fehlgeschlagen ist, damit der Benutzer es erneut versuchen kann

-! #Ready wenn ein AJAX-Aufruf erfolgreich war und die Antwort angezeigt wird

Der Aufruf von attributeChangedCallback, um das DOM der Komponente zu ändern, wenn sich ein Attribut ändert, ist der letzte Schritt in unserer Erforschung von Webkomponenten.

Die Erstellung einer Komponente unter Verwendung der Webkomponenten-Standards ist etwas komplexer als die Verwendung einer Implementierung wie React oder Polymer, aber die Wiederverwendbarkeit von Webkomponenten ist erstaunlich. Sobald Sie eine Komponente entwickelt haben, können Sie sie überall verwenden. Sie müssen keine JavaScript-Bibliotheken importieren oder sich um den Erstellungsprozess kümmern; es handelt sich lediglich um HTML- und JavaScript-Code, den Ihr Browser verwaltet.

Dieser Blog hat eine kleine Einführung in Web Components gegeben und wenn Ihr Interesse geweckt wurde, gibt es viele Ressourcen, um mehr Informationen zu erhalten. Wenn Sie mit meinem Beispiel spielen möchten, können Sie dieses GitHub-Repository klonen und die Seite test/browser/wct-test.html öffnen.

Ich hoffe auch, dass Sie die Komponente in Aktion sehen wollen. Mein nächster Blog wird zeigen, wie ich die Komponente in Magnolia eingesetzt habe.