Web Components: Shadow DOM

Web Components Logo
Das Konzept des Shadow DOM wird in aktuellen Browsern bereits genutzt. Ersichtlich ist dies bei Standard Komponenten wie Slidern, Buttons oder Videointerfaces.

Hinter der Fassade der Video Steuerelemente, welche ein Browser für den <video> Tag automatisch anzeigt, stecken lediglich eine Ansammlung von <div>, <input> und anderer Tags.

In den folgenden zwei Screenshots sieht man dasselbe Element zuerst ohne Shadow DOM und danach mit.

Video Tag ohne Shadow DOM

Video Tag ohne Shadow DOM

Video Tag mit Shadow DOM

Video Tag mit Shadow DOM

Shadow DOM anzeigen
Der Aufbau eines Shadow DOMs kann im Chrome mithilfe des Code Inspectors sichtbar gemacht werden. Dazu muss in den generellen Einstellungen die Auswahl „Show Shadow DOM“ angewählt sein.

Chrome Inspector Settings für Shadow DOM

Aktivierung der Anzeige des Shadow DOM im Inspector von Chrome

Shadow DOM Konzept

Bis anhin haben uns Iframes die Möglichkeiten geboten unabhängige Elemente in einer Webseite zu nutzen die nicht vom restlichen HTML und CSS beeinflusst werden. Darunter gelitten hat die Interaktion zwischen dem Inhalt des Iframes und dem Rest der Webseite.
Shadow DOM kapselt Styles und Markup ohne die negativen Seiteneffekte eines Iframes.
Wenn nötig besteht bei einem Shadow DOM die Möglichkeit Markup und Styles vom umgebenden Kontext zu erben. Dies dient z.b. dazu ein Element in verschiedenen Kontexten zu verwenden und gleichzeitig die grundlegende Farb- und Gestaltungsschemen des Kontextes zu übernehmen.

Shadow Host

<div class="shadow-host-beispiel"></div>

<script>
  var host = document.querySelector('.shadow-host-beispiel');
  var root = host.createShadowRoot();
  root.innerHTML = '<p>Inhalt des Shadow DOM!</p>'
</script>

Mit

createShadowRoot

kann man ein Markup Element zu einem Shadow Host machen. Dieser beherbergt dann beliebiges gekapseltes Markup welches vom Rest der Webseite unbeeinflusst bleibt.
Elemente wie <video> und <audio> werden von unterstützenden Browsern automatisch zu Shadow Hosts gemacht und mit browserspezifischem Markup befüllt.

Shadow Root
Beim Erstellen eines Shadow Hosts entsteht ein neues document Fragment, der Shadow Root. Dieser spannt quasi ein neues document auf.
Via Insertion Points kann Markup des ursprünglichen Elements (Shadow Host) selektiv in den Shadow Root übernommen werden. Es wird jedoch kein DOM verschoben, sondern das Markup wird lediglich im Shadow Root gerendert. Das nicht übernommene Markup wird nicht gerendert.
Zum Verständnis hilft der Artikel Shadow DOM 301 und der Shadow DOM Visualizer von Eric Bidelman.

Shadow Boundary
Als Shadow Boundary bezeichnet man die Grenze die ein Shadow Root bildet.
Wenn z.b. innerhalb eines Shadow DOM alle <h2> grau gestylet sind bleibt dies auch so wenn das umgebende Dokument die <h2> blau gestylet hat.
Des weiteren sind die <h2> innerhalb des Shadow DOM im Kontext des äusseren Dokument nicht selektierbar via

document.querySelector('h2')

Browsersupport
Aktuell wird Shadow DOM unterstützt von Chrome und Opera. Internetexplorer, Firefox und Safari bieten noch keine Unterstützung.

Links
A Guide to Web Components (Level: Einsteiger)
Shadow DOM 101 (Level: Fortgeschrittene)
Shadow DOM 201 (Level: Fortgeschrittene)
Shadow DOM 301 (Level: Fortgeschrittene)
Video Explanation by Eric Bidelman
Shadow DOM Visualisierer
W3C Draft for Shadow DOM

Hinterlasse eine Antwort

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

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>