Web Components/Shadow DOM
Text-Info
- 10 min
- mittel
- 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.
Inhaltsverzeichnis
Funktionsweise
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:
Diese Elemente können im Allgemeinen weder mit JavaScript angesprochen noch mit CSS formatiert werden.
Shadow-Host & Shadow-Root
- 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
Das Shadow-DOM kann genauso wie das „normale“ DOM mit den DOM-Methoden erzeugt und manipuliert werden.
attachShadow()
Die Methode attachShadow verlangt zwingend ein Objekt als Parameter und erwartet darin eine mode-Eigenschaft. mode kann den Werte "open" oder "closed" haben, und beschreibt, ob das Shadow DOM über die shadowRoot-Eigenschaft des Elements erreichbar ist ("open") oder nicht ("closed").
<div id="shadowHost"></div>
<script>
var shadow = document.querySelector('#shadowHost').attachShadow({ mode: "open" });
shadow.innerHTML = '<p>Dieser Text steht im Shadow-DOM.</p>';
shadow.innerHTML += '<style>p { color: red; border: 1px dashed; }</style>';
</script>
Untersuchen Sie die einzelnen Elemente im Seiteninspektor!
Anlegen und Einbinden eines Templates
Einfacher und übersichtlicher ist die Verwendung des im vorigen Kapitel eingeführten Template-Elements:
slot-Element
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, das jedoch nicht in Version 1 übernommen wurde und bereits wieder obsolet ist.
Siehe auch
CSS-Formatierung des Shadow DOM
Das SVG-Use-Element kann aus beliebig vielen Teil-Elementen bestehen, die im Shadow DOM vorhanden sind, aber nicht durch CSS formatiert werden können. MIt Custom properties können auch einzelne Bestandteile des use-Elements formatiert werden.
Weblinks
- W3C: Shadow-DOM
- WHATWG shadow trees
- webcomponents.org: Introduction to Shadow DOM
- html5rocks: Shadow DOM
- Shadow DOM v1: Self-Contained Web Components
- Dimitri Glazkow: What the Heck is Shadow DOM?
deutsch:
- Self-Blog: Web Components – eine Einführung von Raoul Schaffranek
- Peter Kroener: Web Components erklärt, Teil 1: Was sind Web Components? (28.Mai 2014 von Peter Kroener)
- frontend.namics: Web Components: Shadow DOM (27. Mai 2014 von Beat Gebistorf )
- neuwaerts: Web Components: Die Zukunft des Internets mit Polymer.js
- splendid: Gekapseltes CSS mit Web Components
attachShadow()ein Wurzelelement für den anzulegenden Teilbaum erzeugt. In dieses Wurzelelement wird mit innerHTML ein Absatz und eine dazugehörende CSS-Regel hinzugefügt.