© svetabelaya/Shutterstock.com
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 benutzen kann. Eine wirkliche Separierung von der umgebenden Seite findet dagegen nur im DOM und im CSS statt.

Will man ein Legacy Frontend mit Hilfe von Shadow DOM wieder unter Kontrolle bringen, so gilt es zuallererst, entsprechende Komponenten im DOM zu identifizieren. Hier bieten sich insbesondere Bausteine an, die sich in der Vergangenheit als volatil gegen CSS-Änderungen gezeigt haben. Verschachtelte Komponenten sind prinzipiell möglich, sind aber zumindest bei der Einarbeitung in das Thema keine gute Wahl.

Erste Schritte

Durch Anhängen eines sogenannten Shadow Roots über attachShadow() wird das identifizierte Element zum Shadow Host und nimmt scheinbar nicht mehr am Rendering der Webseite teil. Es ist also keineswegs so, dass der Inhalt des Elements auf magische Weise von selbst in den Shadow DOM wandert. Das bisherige innerHTML lässt sich aber problemlos per JavaScript vom Shadow Host ins Shadow DOM übertragen. Da das Element jetzt nicht mehr an der restlichen CSS-Formatierung der Webseite teilnimmt, muss innerhalb des Elements ein Style-Block ergänzt werden. Hier zeigt sich, dass diese Styles im vermeintlich nicht gerenderten Shadow Host doch noch fröhlich mit der restlichen Webseite interagieren. In Listing 1 äußert sich dies z. B. durch die Blaufärbung des ersten <h1>-Elements.

Listing 1

<h1>Welcome to Kilroy</h1> <div id="kilroy"> <style>h1 {color: blue; }</style> <h1>Kilroy is here</h1> </div> <script> (function() {...

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