HTML/Web Components/Shadow DOM

Aus SELFHTML-Wiki
< HTML‎ | Web Components(Weitergeleitet von Shadow DOM)
Wechseln zu: Navigation, Suche
Web Components Logo

Informationen zu diesem Text

Lesedauer
10 min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
gute Kenntnisse in
● HTML
● JavaScript

Moderne Webseiten werden immer komplexer und nehmen Inhalte Dritter, Widgets und Bausteine aus vielen anderen Quellen wie CDNs und ähnlichem auf. Die Einbindung erfolgt entweder gekapselt innerhalb eines iframe oder optimalerweise per AjaX, um die Webseite einheitlich gestalten zu können. Dabei entsteht die Gefahr, dass sich Markup, Skripte und CSS-Regeln gegenseitg in die Quere kommen, wenn Klassen oder IDs mehrfach vergeben werden oder wenn die Spezifität mehrerer Regeln nicht mehr klar ist und nur noch durch das Schlüsselwort !important erreicht werden kann.

Mit Web Components können Sie im Shadow DOM eigene wiederverwendbare Bausteine entwerfen, deren HTML-Elemente gekapselt sind und deren CSS nur in diesem Gültigkeitsbereich angewandt wird. Diese werden ins normale DOM der Webseite eingehängt und sind für Debugger und Skripte nicht direkt sicht- und ansprechbar.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Funktionsweise[Bearbeiten]

Die Vorgehensweise hinter dem Shadow DOM findet sich schon länger bei komplexeren HTML-Elementen wieder. So bestehen Slider, das details-Element mit seinem summary-Marker oder Player wie audio und video nur aus einem Element, das aber aus mehreren „versteckten“ Elementen zusammengebaut ist.

In den Chrome-Developer Tools können Sie dies unter F12 > Settings > Preferences > Elements > Show User-Agent Shadow DOM anklicken und sichtbar machen.

Das audio-Element besteht in dieser erweiterten Ansicht plötzlich aus mehreren div- und input-Elementen:

Screenshot des Shadow DOM eines audio-Elements

Diese Elemente können im allgemeinen weder mit JavaScript angesprochen noch mit CSS formatiert werden.

Shadow Host & Shadow Root[Bearbeiten]

  • Shadow Host (englisch für Gastknoten): das DOM-Element, das als Einfügepunkt den Elementenbaum des Shadow DOM aufnimmt.
  • Shadow Root (englisch für Wurzel): Wurzelelement des Teilbaums des Shadow DOM. Dies ist ein Knoten, der die Grenze zwischen „normalem“ und „verstecktem“ DOM darstellt. Diese Grenze kapselt die Knoten des Shadow DOM von Skripten und CSS-Regeln der Webseite.
  • Shadow DOM (englisch für Schatten DOM): „versteckter“ und gekapselter Teilbaum des Elementenbaums, der nicht für andere Skripte und CSS-Regeln zugänglich ist.
  • Shadow Boundary (englisch für Grenze des „versteckten“ DOM)

Verwendung[Bearbeiten]

Das Shadow DOM kann genauso wie das „normale“ DOM mit den DOM-Methoden erzeugt und manipuliert werden.

createShadowRoot()[Bearbeiten]

Beispiel: Einbinden des Templates ansehen …
<div id="shadowHost"></div>
Im Markup befindet sich ein (leeres) div-Element.
  var shadow = document.querySelector('#shadowHost').createShadowRoot(); 
    shadow.innerHTML = '<p>Dieser Text steht im Shadow DOM.</p>';
    shadow.innerHTML += '<style>p { color: red; border: 1px dashed; }</style>';
Nach dem Laden des Dokuments wird das div über seine id selektiert und mit createShadowRoot() ein Wurzelelement für den anzulegenden Teilbaum erzeugt. In dieses Wurzelelement wird mit innerHTML ein Absatz und eine dazugehörende CSS-Regel hinzugefügt.

Untersuchen Sie die einzelnen Elemente im Seiteninspektor!

Anlegen und Einbinden eines Templates[Bearbeiten]

Einfacher und übersichtlicher ist die Verwendung des im vorigen Kapitel eingeführten template-Elements:

slot-Element[Bearbeiten]

Ein Template ist nur sinnvoll, wenn es dynamisch mit Inhalt befüllt werden kann. Das slot-Element (slot (englisch für Steckplatz oder Einschub)) kann über das name-Attribut angesprochen werden. Ursprünglich war hier ein content-Element vorgesehen, dass jedoch nicht in Version 1 übernommen wurde und bereits wieder obsolet ist.


Weblinks[Bearbeiten]


deutsch: