© saicle/Shutterstock.com
PHP Magazin
Mit Shadow DOM Legacy Frontends refaktorieren

Mehr Licht als Schatten


Backend-Entwickler haben mit dem Frontend häufig ihre liebe Not: Dieser Artikel zeigt, wie Web Components und insbesondere Shadow DOM dabei helfen, die Kontrolle über sein Frontend zurückzugewinnen.

Während im Backend klare Schnittstellen die Kommunikation zwischen Bausteinen regeln, herrscht im Frontend Anarchie: Jeder mit einem Fuß in der Tür interagiert nach Belieben mit dem DOM und seiner Darstellung. Externe Libraries oder User Defined CSS: Schnell bestimmt irgendwann ein fragiles Konstrukt aus schlecht dokumentierten Konventionen, z-indizes- und !important-Anweisungen die Darstellung einer Webseite. Web Components – insbesondere Shadow DOM – sorgen dafür, dass man wieder die Kontrolle über sein Frontend erhält.

Shadow DOM ist eines von drei APIs der sogenannten Web Components. Bei den beiden anderen handelt es sich um Custom Elements und HTML-Templates. Diese werden wir später im Artikel ebenfalls zu Gesicht bekommen. Zweck der Web Components ist es, wiederverwendbare, in sich gekapselte Frontend-Komponenten ohne weitere Libraries möglich zu machen, sodass der ein oder andere sie liebevoll als Vanilla Components bezeichnet.

Effektive Browserunterstützung

Neu ist das Thema Web Components nicht, bereits 2016 wurde Version 1 der Spezifikation für deren wichtigsten Teilbereich Shadow DOM veröffentlicht. Neu ist, dass es eine effektive Browserunterstützung von annähernd 90 Prozent gibt [1]. Für IE, Before-Chromium Edge und einige Exoten stehen brauchbare Polyfills bereit, sodass ein produktiver Einsatz mittlerweile guten Gewissens in Betracht gezogen werden kann.

Die Einarbeitung in Shadow DOM beschert immer wieder kleinere und größere Überraschungen. So basiert dessen Implementierung vollständig auf JavaScript, gleichzeitig bietet es gerade für JavaScript keinerlei direkte Abkapselung: So kann ein mit einer Komponente ausgeliefertes JavaScript von der umgebenden Webseite aufgerufen werden, während eine Komponente problemlos JavaScript der umgebenden Seite benutze...

PHP Magazin
Mit Shadow DOM Legacy Frontends refaktorieren

Mehr Licht als Schatten

Backend-Entwickler haben mit dem Frontend häufig ihre liebe Not: Dieser Artikel zeigt, wie Web Components und insbesondere Shadow DOM dabei helfen, die Kontrolle über sein Frontend zurückzugewinnen.

Marcel Normann


Backend-Entwickler haben mit dem Frontend häufig ihre liebe Not: Dieser Artikel zeigt, wie Web Components und insbesondere Shadow DOM dabei helfen, die Kontrolle über sein Frontend zurückzugewinnen.

Während im Backend klare Schnittstellen die Kommunikation zwischen Bausteinen regeln, herrscht im Frontend Anarchie: Jeder mit einem Fuß in der Tür interagiert nach Belieben mit dem DOM und seiner Darstellung. Externe Libraries oder User Defined CSS: Schnell bestimmt irgendwann ein fragiles Konstrukt aus schlecht dokumentierten Konventionen, z-indizes- und !important-Anweisungen die Darstellung einer Webseite. Web Components – insbesondere Shadow DOM – sorgen dafür, dass man wieder die Kontrolle über sein Frontend erhält.

Shadow DOM ist eines von drei APIs der sogenannten Web Components. Bei den beiden anderen handelt es sich um Custom Elements und HTML-Templates. Diese werden wir später im Artikel ebenfalls zu Gesicht bekommen. Zweck der Web Components ist es, wiederverwendbare, in sich gekapselte Frontend-Komponenten ohne weitere Libraries möglich zu machen, sodass der ein oder andere sie liebevoll als Vanilla Components bezeichnet.

Effektive Browserunterstützung

Neu ist das Thema Web Components nicht, bereits 2016 wurde Version 1 der Spezifikation für deren wichtigsten Teilbereich Shadow DOM veröffentlicht. Neu ist, dass es eine effektive Browserunterstützung von annähernd 90 Prozent gibt [1]. Für IE, Before-Chromium Edge und einige Exoten stehen brauchbare Polyfills bereit, sodass ein produktiver Einsatz mittlerweile guten Gewissens in Betracht gezogen werden kann.

Die Einarbeitung in Shadow DOM beschert immer wieder kleinere und größere Überraschungen. So basiert dessen Implementierung vollständig auf JavaScript, gleichzeitig bietet es gerade für JavaScript keinerlei direkte Abkapselung: So kann ein mit einer Komponente ausgeliefertes JavaScript von der umgebenden Webseite aufgerufen werden, während eine Komponente problemlos JavaScript der umgebenden Seite benutze...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang