Shadow DOM Grundlagen

Das Shadow DOM ist eine versteckte Hierarchie innerhalb des DOMs der Hauptseite. Den Shadow DOM kennen wir eigentlich schon länger. Am offensichtlichsten zeigt er sich beim <iframe>, denn jedem ist klar, dass sich innerhalb dieses Tags das DOM der eingebeteten Seite befindet. Etwas weniger offensichtlich zeigt er sich beim <video>-Tag. man baut nur das <video>-Tag ein, jedoch gibt es automatisch auch Elemente für die Navigation, die ja auch Objekte sein müssen. Diese Tags sind alle vordefiniert und können nur verwendet werden, jedoch lässt sich ein Shadow DOM mit Hilfe von JavaScript auch selbst erzeugen und nutzen. (Prefixes derzeit noch nötig)

Erstmal müssen wir definieren welches Element das Root-Element des Shadow DOMs werden soll.

var root = document.getElementById("#elem").createShadowRoot();

Wir haben nun quasi einen DOM im DOM, der normal beeinflusst werden kann. Für das Styling gibt es mehrere Möglickeiten.

<div id="elem">
  ShadowDOM
  <h1>Eine Überschrift</h1>
</div>

Styles im Shadow DOM

Mittels

root.innerHTML = '<style>...</style>';

kann man ein Style-Tag mit CSS direkt im Shadow DOM platzieren. Dort schreibt man normales CSS wie gewohnt. Möchte man auf das Host-Objekt (in diesem Fall das #elem) zugreifen, so schreibt man im CSS:

:host {
  ...
}

Möchte man Regeln nur gelten lassen, wenn das Host-Element beispielsweise ein div-Tag ist, so geht auch

:host(div) {
  ...
}

Shadow DOM von außen stylen

Normalerweise beeinflusst CSS von außen nicht das Aussehen der Tags im Shadow DOM, aber möchte man beispielsweise ein Widget dem eigenen Layout in den Farben anpassen kann man das Styling dennoch beeinflussen.

Der Zugriff von außen erfolgt durch ein Pseudo-Element:

#elem::shadow h1 {
  color: #b00;
}

Das funktioniert schön und gut, solange es nur eine Ebene von Shadow-Elementen gibt. Beinhaltet ein Shadow DOM jedoch selbst auch einen Shadow DOM erreicht man so nur die erste Shadow DOM-Ebene (ähnlich dem CSS-Selektor „>“).
Möchte man rekursiv in alle Verschachtelungs-Ebenen vordringen benötigt man /deep/.

body /deep/ h1 {
  color: #b00;
}

Diese Anweisung färbt nun alle <h1>-Elemente, egal ob im DOM oder in irgendeinem noch so tief verschachtelten Shadow DOM, rot.

Wofür braucht man nun eigentlich Shadow DOM? Liebstes Beispiel sind Widgets: jemand bietet Markup und Styling für andere Benutzer an, jedoch sollte des Markup nicht die Seite beeinflussen, in die es eingebaut wird und gleichzeitig sollte das Styling der äußeren Seite keinen Einfluss auf das Layout des eingebetteten Codes haben. Shadow DOM erfüllt diese beiden Anforderungen perfekt.

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Ein Gedanke zu „Shadow DOM Grundlagen“

Schreibe einen Kommentar

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