Was sind Web Components?

Web Components sind eine Reihe verschiedener Web-Technologien, die es Dir als Web-Entwickler ermöglichen, wiederverwendbare benutzerdefinierte Elemente zu erstellen, deren Funktionalität vom restlichen Code abgekapselt ist.

Wozu brauche ich Web Components?

Als Web- und Software-Entwickler wissen wir, dass immer eine gute Idee ist, guten Code so oft wie möglich wiederzuverwenden.

Genau zu diesem Ziel der Wiederverwendbarkeit kannst Du Web-Komponenten nutzen!

Damit kannst Du diese Web Components jetzt jederzeit in Deinen Webanwendungen verwenden.

Vorteile der Web-Components

  • hoher Grad zur Wiederverwendbarkeit
  • Interoperabilität zwischen unterschiedlichsten Anwendungen erhöhen
  • unerwünschte Seiteneffekte vermeiden

Was ist neu am Konzept des Web-Component?

Bei benutzerdefinierten Markup-Strukturen war die Wiederverwendbarkeit vorhandener Code-Elemente traditionell nicht so einfach. Denke an das komplexe HTML und all die unterschiedlichen Stile und Skripte, die mit dieser Markup-Struktur von HTML verbunden sind.

  • Wie oft musstest Du in der Vergangenheit HTML-Code neu schreiben, um benutzerdefinierte UI-Steuerelemente zu rendern?
  • Wie häufigst bist Du mit dieser Methode an Deine Grenze als Frontend-Entwickler gestossen?
  • Hat Dir die mehrfache Verwendung von Steuerelementen im Web als Entwickler bereits mehrfach erhebliche Kopfschmerzen bereitet?
  • Hattest Du und / oder andere agile Teams Chaos auf deiner oder anderen Webseiten sobald Steuerelemente mehrfach verwendet wurden, sobald Du hierbei nicht extrem vorsichtig gewesen bist um alle unerwünschten Seiteneffekte zu vermeiden?

Wie funktionieren Web Components?

Die Strategie der Web Components zielt darauf ab, solche Probleme zu lösen. Dabei bestehen Web Components aus drei Kerntechnologien.

Diese drei Web-Technologien können gemeinsam dazu die zusammen verwendet werden, um vielseitige benutzerdefinierte Elemente mit gekapselter Funktionalität zu erstellen. Dabei kann eine Web Component dann jederzeit ohne unerwünschte Seiteneffekte überall wiederverwendet werden. Code-Kollisionen gehören mit der Web-Component somit der Vergangenheit an.

1. Benutzerdefinierte Elemente:

Eine Reihe von JavaScript-APIs, ermöglicht es Dir, benutzerdefinierte Elemente und deren Verhalten zu definieren, damit Du diese Web-Elemente dann nach Belieben in Deiner Benutzeroberfläche weiter verwenden kannst.

2. Shadow-DOM / Schatten-DOM:

Eine Reihe von JavaScript-APIs zum Anhängen eines gekapselten „Schatten“-DOM-Baums an ein Element – der getrennt vom Haupt-DOM des Dokuments gerendert wird – und zur Steuerung der zugehörigen Funktionen. Auf diese Weise kannst Du Eigenschaften eines Elements gekapselt beibehalten, so dass Du diese Elemente mit Skripten versehen und gestalten kannst, ohne Kollisionen mit anderen Teilen des Dokuments befürchten zu müssen.

3. HTML-Vorlagen:

Mit den Elementen <template> und <slot> kannst Du Markup-Vorlagen schreiben, die auf der gerenderten Webseite nicht angezeigt werden. Diese äußerst nützlichen Markup-Templates können dann mehrfach als Grundlage für die Struktur eines benutzerdefinierten Elements wiederverwendet werden.

So setzt Du Deine Web Components Schritt für Schritt um:

Der grundlegende Ansatz für die Implementierung einer Webkomponente funktioniert im Allgemeinen wie folgt am besten:

  1. Du erstellst eine Klasse, in der Du die Funktionalität Deiner Webkomponente spezifizierst, indem Du die ECMAScript 2015-Klassensyntax verwendest.
  2. Registriere Dein neues benutzerdefiniertes Element mit der Methode CustomElementRegistry.define(), indem Du den zu definierenden Elementnamen, die Klasse oder Funktion, in der seine Funktionalität festgelegt ist, und optional das Element, von dem es erbt, übergibst.
  3. Falls erforderlich, fügst Du dem benutzerdefinierten Element mit der Methode Element.attachShadow() einen DOM-Shadow hinzu.
  4. Füge Child-Elemente, Event-Listener usw. zum Shadow-DOM hinzu, indem Du reguläre DOM-Methoden verwendest.
  5. Definiere bei Bedarf eine HTML-Vorlage mit <template> und <slot>.
  6. Verwende wiederum reguläre DOM-Methoden, um die Vorlage zu klonen und das Template damit an sein Shadow-DOM anzuhängen.
  7. Verwende Dein benutzerdefiniertes Element an beliebiger Stelle auf Deine Webseite, genau wie jedes andere reguläre HTML-Element.

Web-Components sind nicht nur allein zur Web-APP-Entwicklung nützlich. Ohne Web-Framework oder Bibliothek funktioniert eine Web-Komponente meist auch nicht.

Plattformübergreifende Templates, Ideen und Code-Snippets für Web Components findest Du auch hier.