© Alexzel/Shutterstock.com
Komponentenbasierte Architektur mit Web Components

Bausteine für das Web


Mit Web Components können wiederverwendbare Komponenten für Webanwendungen erstellt werden. Es ist lohnenswert, sich diesen vielversprechenden Ansatz einmal genauer anzuschauen.

Spätestens mit dem Auftreten moderner JavaScript Frameworks und Bibliotheken wie Angular, Vue und React hat sich die komponentenorientierte Architektur im Frontend auf breiter Masse durchgesetzt. Diese Architekturform können Sie nicht nur nutzen, wenn Sie auf eine der genannten Lösungen setzen, sondern auch mit nativem HTML, CSS und JavaScript.

Der Begriff Web Components steht für eine Sammlung von Browserschnittstellen, mit deren Hilfe Sie auch ohne Unterstützung einer zusätzlichen Bibliothek eine Komponentenarchitektur erzeugen können. Das bedeutet allerdings nicht, dass Sie sich komplett von den etablierten Lösungen verabschieden müssen, sondern dass die Möglichkeiten, gerade im Bereich von Framework-übergreifenden Lösungen, erweitert werden. In diesem Artikel werfen wir einen Blick auf die zugrunde liegenden Technologien und sehen uns an, wie Sie native Web Components erzeugen und in eine bestehende Applikation integrieren können.

Komponentenarchitekturen

Bevor wir uns dem eigentlichen Thema, den Web Components, widmen, erfahren Sie zunächst, worum es bei einer komponentenorientierten Architektur geht und warum die Entwickler der großen Frameworks und Bibliotheken auf diese Architekturform setzen. Eine Komponente steht für einen Baustein einer Applikation, vergleichbar mit den Tags einer HTML-Seite, aber mit dem Unterschied, dass eine Komponente aus einer HTML-Struktur, eigenem Styling und Logik besteht. Die Idee hinter den Komponenten ist, dass diese Bausteine möglichst eigenständig sind und über definierte Schnittstellen mit der übrigen Applikation interagieren. Außerdem können Sie Ihre Komponenten so gestalten, dass Sie sie mehrfach verwenden können.

Das einfachste Beispiel für eine solche Komponente ist ein einzelnes Element in einer Liste. Ein solches Listenelement kann beispielsweise den Titel des Eintrags darstellen und Buttons für dessen Bearbeiten und Löschen bieten. Da die Komponente die darzustellenden Informationen auch von außerhalb erhalten kann, besteht die Möglichkeit, dass eine einzige Komponente für die Darstellung beliebig vieler Listenelemente verwendet werden kann. Diese Idee bildet auch die Grundlage für die sogenannten Komponentenbibliotheken. Dabei handelt es sich um Sammlungen von Komponenten, die in der Regel unabhängig von einer konkreten Applikation sind. Das beginnt bei einfachen Komponenten wie Formularelementen und reicht bis zu aufwendigen Komponenten, wie beispielsweise Date Pickern.

Der Nachteil dieser Komponentenbibliotheken ist in der Regel, dass sie nur für ein bestimmtes Framework entwickelt werden. Dabei erlauben es gerade größere Unternehmen, verschiedene Frameworks für die Entwicklung von Applikationen zu verwenden. Gerade in einer solchen Umgebung ist es wichtig, dass die Standardkomponenten – wie beispielsweise Buttons – über die Applikationsgrenzen hinweg gleich aussehen und funktionieren. Um solche Framework- und applikationsübergreifende Komponenten zu schaffen, unterstützen die großen Frameworks mittlerweile auch das Rendern von Web Components, was es ermöglicht, eine Komponentenbibliothek beispielsweise in Angular zu erzeugen und in einer React-Applikation zu verwenden. Doch welche Schnittstellen und Technologien stecken hinter den Web Components?

Grundlagen von Web Components

Web Components verfolgen die Idee, dass mit HTML, CSS und JavaScript neue HTML-Elemente definiert werden, mit deren Hilfe komplette Applikationen erzeugt werden können. Die Basis von Web Components sind wie bei den Komponenten in JavaScript Frameworks auch HTML-Templates, komponentenspezifische Styles und eine JavaScript-Klasse, die die Logik der Komponente kapselt. Eine Web Component ist nicht von der übrigen Applikation isoliert, sondern kann über Attribute Informationen entgegennehmen und durch Events mit der umliegenden Applikation kommunizieren.

Im folgenden Beispiel implementieren wir eine einfache To-do-Liste, die die Möglichkeit bietet, To-dos anzuzeigen, sie als erledigt zu markieren und zu löschen. Die Schnittstellen, die Sie für die Implementierung von Web Components nutzen, werden mittlerweile von allen modernen Browsern unterstützt. Abbildung 1 zeigt das Suchergebnis für Web Components bei www.caniuse.com.

springer_bausteine_1.tif_fmt1.jpgAbb. 1: Suchergebnis für Web Components bei caniuse.com

Das Ergebnis besteht aus einer Kombination von Custom Elements, HTML Templates, HTML Imports und dem Shadow DOM. Auf diese einzelnen Features werden wir im Folgenden Schritt für Schritt eingehen.

Custom Elements – eigene Tags definieren

Web Components werden durch benutzerdefinierte Tags repräsentiert. Grundsätzlich erlaubt Ihnen der Browser die Verwendung eigener Tags. Diese versucht der Browser als Standardelemente zu interpretieren, sodass er dem Benutzer möglichst die gesamte Seite fehlerfrei präsentieren kann. Eine besondere Funktionalität ist in diesem Fall nicht hinterlegt. Web Components gehen an dieser Stelle noch einen Schritt weiter und definieren, wie genau der Browser mit dem benutzerdefinierten Element umzugehen hat. Die Grundlage für die Custom Elements bildet eine Kombination aus der define-Methode des customElements-Objekts des Browsers und der HTMLElement-Klasse. Hier sehen Sie die Grundlage für die list-item-Komponente:

class ListItem extends HTMLElement {}) window.customElements.define('list-item', ListItem);

Binden Sie diesen Quellcode in Ihre Webseite ein, können Sie das <list-item>-Tag bereits benutzen. Allerdings steckt hinter diesem Tag noch keinerlei Funktionalität. Dies ändern wir in den nächsten Schritten, indem wir einen Shadow DOM für die Komponente und eine zugehörige Struktur definieren.

Shadow DOM – ein eigener Subbaum des DOM

Web Components werden zwar in eine Applikation eingebunden, bilden jedoch in sich geschlossene Einheiten, die nur über definierte Schnittstellen zu erreichen sind. Das gilt sowohl für Datenflüsse als auch für CSS. Mit dem Shadow DOM können Sie einen eigenen Unterbaum des DOM für die Komponente definieren. Dieser wird mit dem Custom-Element verbunden. Das Custom-Element stellt in diesem Fall den Shadow-Host dar. Das Shadow DOM wird mit der attachShadow-Methode der Komponentenklasse erzeugt. Diese Methode stammt aus der Elementklasse, von der die Komponentenklasse indirekt abgeleitet wird. Das Shadow DOM wird üblicherweise im Konstruktor der Komponentenklasse erzeugt. Beim Aufruf der attachShadow-Methode können Sie mit einem Konfigurationsobjekt die Art des Zugriffs auf das Shadow DOM regulieren. Weisen Sie der mode-Eigenschaft den Wert open zu, kann von außerhalb auf das Shadow DOM zugegriffen werden. Der Wert closed der mode-Eigenschaft verhindert dies. Hier sehen Sie den erweiterten Quellcode der Komponentenklasse:

class ListItem extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({ mode: 'open' }); } })

Im Konstruktor der Komponentenklasse rufen Sie zunächst den Elternkonstruktor auf. Anschließend erzeugen Sie das ShadowRoot-Element für die Komponente. Es bildet die Basis für die Web Component.

Auch mit dieser Erweiterung verfügt die Komponente noch über keine weitere Funktionalität. Das ändert sich jedoch mit dem Einfügen einer HTML-Struktur in...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang