It’s #FrontendFriday – Was sind eigentlich Web Components

26.04.2019

Hallo zusammen, anbei möchte ich euch gerne den kommenden Standard im Web vorstellen: Web Components.

Was sind Web Components überhaupt?

Bei Web Components handelt es sich um eine Sammlung von vier unterschiedlichen W3C-Spezifikationen, mit denen eigene HTML-Tags erzeugt werden können. Durch Web Components wird die Entwicklung von benutzerdefinierten, wiederverwendbaren HTML Elementen ermöglicht, welche vollständig isoliert und gekapselt von der restlichen Anwendung sind.

Web Components bestehen aus 4 Kernelementen die nachfolgend kurz beschrieben werden:

1) Custom Elements

Die Custom Elements stellen die Basis für neue DOM-Elemente dar. Mit Custom Elements lassen sich sowohl komplett eigene DOM-Elemente erzeugen als auch bestehende DOM-Elemente erweitern.

Beispiel: Eigenes DOM-Element erzeugen & einbinden

class MyFirstCustomElementButton extends HTMLElement {

...

}

customElements.define("my-first-custom-element-button", MyFirstCustomElementButton );

<my-first-custom-element-button>Click me</my-first-custom-element-button>

Beispiel: Bestehendes DOM-Element erweitern & einbinden

class MyFirstExtendedButton extends HTMLButtonElement {

...

}

customElements.define("my-first-extended-button", MyFirstExtendedButton , { extends: "button" });

<button is="my-first-extended-button">Click me</button>

2) Shadow DOM

Der Shadow DOM ermöglicht die Kapselung von HTML-Elementen. Was bisher nur mit dem <iFrame> möglich war, lässt sich nun durch den Shadow DOM von Web Components abbilden.

Aus technischer Sicht wird jedem HTML Element ein eigener DOM-Baum zugewiesen, wodurch gerade globale CSS Eigenschaften keine Auswirkungen auf die gekapselten DOM-Bäume haben. Das kommt der Wiederverwendbarkeit von HTML Elementen in unterschiedlichen Anwendungen zu gute.

3) HTML Imports

Die HTML Imports schaffen die Möglichkeit externe HTML-Elemente im eigenen HTML Dokument einzubinden.

Beispiel: Einbindung eines HTML-Imports

<link rel="import" href="../external-html.html">

<external-custom-element></external-custom-element>

4) HTML Templates

Das letzte Element von Web Components stellen die HTML Templates dar. Mit diesen lassen sich HTML Elemente definieren, ohne diese einbinden zu müssen. In der Vergangenheit wurden Elemente, die beispielsweise aus fachlichem Kontext nicht dargestellt werden sollten, über Hacks wie mit CSS: display:none umgesetzt. Mit HTML Templates kann entschieden werden, wann das Template tatsächlich im DOM abgebildet werden soll.

Beispiel: Definition und Integration HTML Template

<template id="mytemplate"> <img src="" alt="Ein Bild"> </template>

var t = document.querySelector('#mytemplate');

// Source des Bildes zur Laufzeit befüllen

t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);

document.body.appendChild(clone);

Wozu werden Web Components benötigt?

Web Components scheinen sich als Standard im Web durchzusetzen. Mit Web Components lässt sich ein hoher Grad an Modularisierung und Kapselung erreichen. Somit lassen sich Web Components in jeglichen JavaScript Frameworks (z.B. React JS / Angular / Vue.js) oder in nativen JS / HTML Webanwendungen einbinden und wiederverwenden. Web Components sollten also besonders dann berücksichtigt werden, wenn bekannt ist, dass die zu entwickelnde Komponenten in unterschiedlichen Frameworks wiederverwendet werden soll.

Wie weit ist der Standard?

Obwohl sich Web Components bereits seit 2011 in der Entwicklung befinden, sind sie noch nicht 100% mit allen Browsern kompatibel. Bisher werden lediglich HTML Templates nativ von allen Browsern unterstützt. Eine volle Unterstützung von Web Components findet sich bisher nur in Chrome und Opera. Für Safari, Firefox und Edge werden weiterhin Polyfills benötigt.

Quellen:

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*