Web Components Entwicklung – Ich mach mir das HTML wie’s mir gefällt

Peter Kirschner
Dienstag, 20. August 2019

Ich beschäftige mich bereits seit einiger Zeit mit der Entwicklung von Web Components. Der Grund, wieso ich mir dieses Thema genauer angesehen habe, ist leicht erklärt: Wir haben den Anspruch, dass bestimmte Elemente bei Kundenprojekten immer gleich aussehen und diese dem CI entsprechen.

Nehmen wir als Beispiel einen simplen Log-In Button, der oft in unterschiedlichen Tools anders aussieht. Ich bin der Meinung, dass Elemente, die die gleiche Funktionalität haben, auch immer gleich aussehen sollten, egal in welchem System. Dieses Beispiel ist zwar ein reines Design-Thema, aber dieser Ansatz gilt nicht nur für banale Gestaltungselemente, sondern kann auch auf Komponenten, also kleine Applikationen oder standardisierte Funktionen, wie zum Beispiel eine Validierung oder auch gesamte Applikationsteile, angewandt werden.

Anstatt diese Komponente in jedem Framework zu programmieren und dann immer wieder zu verwenden, ist das Ziel des Konzeptes der Web Components, diese Elemente oder Komponenten so zu erstellen, dass sie in jeder beliebigen Webtechnologie einfach eingebettet und eingesetzt werden können. Also auf einer klassischen ASPX-Seite, in MVC, Angular, React oder SharePoint.


Wie funktionieren Web Components?

Jeder Browser unterstützt einen definierten Satz an HTML Tags. Um diesen zu erweitern, gibt es eine eigene API: “Custom Elements”.

darstellung_tag_im_browser
So sieht der Tag im Browser aus.

Neue Elemente müssen an dieser Stelle registriert werden. Diese Technik wird bereits von allen modernen Browsern unterstützt und somit gibt es keine technischen Hürden, diese nicht schon jetzt einzusetzen. Damit die Elemente auch tatsächlich in jeder beliebigen Webtechnologie einfach verwendet werden können, soll eine Code-Isolation erreicht werden. Daher sollten das Styling bzw. die Programmlogik der Hauptseite nicht die Komponente betreffen und umgekehrt. Auch dies ist in den meisten Browsern mittlerweile möglich. Für alle anderen Browser gibt es einen Workaround mittels Polyfill. Unterstützt der Browser ES2015, so ist kein Workaround erforderlich.

Um das Ziel der Code-Isolation zu erreichen, gibt es den sogenannten Shadow DOM. Eine HTML-Seite besteht aus DOM (Document Object Model) Elementen. Tags wie DIV oder HR werden als „Light DOM“ bezeichnet. Wenn es schon einen Light DOM gibt, muss es auch einen „Shadow DOM“ geben. Dieser wird in zwei Kategorien unterteilt. Der„Closed Shadow DOM“ ist den Meisten vermutlich zumindest von den Tags bekannt, denn das sind zum Beispiel der Audio und der Video Tag. Jeder Browser interpretiert solche Tags unterschiedlich. Seit einigen Jahren gibt es zusätzlich den „Open Shadow DOM“. Dort ist alles möglich :).

Wie setzt man das Ganze jetzt um?

Die Tags können entweder mit plain JavaScript oder auch für modernere Entwicklungsframeworks in „Angular Elements“ erstellt werden. Für React gibt es „React-Shadow“. Wir haben zur Veranschaulichung die Validierung bei der Eingabe der österreichischen Sozialversicherungsnummer vorbereitet. Da dieses Beispiel ein recht einfaches ist, haben wir mit JavaScript erstellt. Natürlich kann dieses Beispiel beliebig weiterentwickelt werden, zum Beispiel für die Eingabe von Produktnummern in Unternehmen oder Barcodes. Die österreichische Sozialversicherungsnummer ist in Zifferngruppen unterteilt, xxxx xx xx xx, und die 4. Stelle im ersten Block ist eine Prüfziffer (https://de.wikipedia.org/wiki/Sozialversicherungsnummer).
berechnung_sozialversicherung
Die Anforderungen an den Tag in unserem Beispiel sind folgende: Die Eingabe soll die Gruppierung der Zahlen wiederspiegeln. Ausgabe-Event mit mehreren Werten: Eingabewert / Formatierter Wert und ob dieser auch gültig ist. Um das Beispiel zu verdeutlichen, soll der Platzhalter dynamisch aktualisierbar sein, um die Methode „observedAttributes“ zu demonstrieren.

Den Code zu dem Beispiel findet ihr hier: https://github.com/cubidobusinesssolutions/BlogCustomElements

Wenn ihr Fragen dazu habt, stehe ich natürlich gerne zur Verfügung! Ich freue mich auf eure Nachricht

Weitere Blogbeiträge

zum Thema Development

Updates for innovators: Abonnieren Sie unseren Blog