Shadow DOM

Januar 2024

Ein Beispiel vorbereiten

Wir beginnen am besten mit einem Beispiel. Dazu bauen wir ein HTML-Dokument auf, nehmen das in HTML und CSS beschriebene Grunddokument als Vorlage und bringen folgende Codeschnipsel ein:

in den HTML-Bereich

<button onclick="window.history.back()">Zurück</button>
<h3>Shadow DOM</h3>

<div id="host">&nbsp;</div>
<div id="display">&nbsp;</div>

in den CSS-Bereich

body     { background-color: #fff; }
#display { border:1pt solid green; }
#host    { border:1pt solid red;   }

div { 
  margin:5pt; padding:2pt;
  width: min-content; 
  white-space: nowrap;
}

Screenshot

Darstellung wie beschrieben Geöffnet im Browser sehen wir die Überschrift und zwei leere Boxen, eine rot und eine grün umrandet.

Ein Element wird zum Shadow-Host

Wir verwenden den Script-Bereich 2 unseres HTML-Dokuments und erklären das div-Element mit dem id-Wert host zum sogenannten Shadow Host mit folgendem Scriptcode. 
"use strict";

const hostElement = document.getElementById("host");
const myShadowRoot = hostElement.attachShadow({ mode: "open" });
Ein Element wird zum ShadowHost, wenn ihm ein Shadow Root zugefügt wird, und das bewirkt die Methode .attachShadow(); siehe MDN, Element: attachShadow() method
Nicht jedem Elementtyp kann ein ShadowRoot zugefügt werden, bei selbstdefinierten Elementen gibt es keine Einschränkungen.
Der ShadowRoot ist eine unsichtbare Grenze, die ihren Inhalt vom äußeren Dokument trennt. Aber einen Inhalt müssen wir noch zufügen, am einfachsten so, wie es der weitere JavaScript-Code zeigt. 
myShadowRoot.innerHTML = '<span>span-Element mit Text im Shadow DOM</span>';

Screenshot 2

Darstellung wie beschrieben Und jetzt ändert sich die Darstellung im Browser, der Inhalt des ShadowRoot ist wie ganz normales HTML zu sehen.
Der Unterschied besteht darin, dass der Inhalt durch einen eigenen DOM-Bereich repräsentiert wird.

Eigenschaft shadowRoot

Ein Auslesen des ShadowRoot ist über die Eigenschaft shadowRoot möglich, die dem Host-Element zugeordnet ist,
sieheMDN, Element: attachShadow() method.
Wir erweitern unseren JavaScript-code: 
const myDisplay = document.getElementById("display");
if (hostElement.shadowRoot)
{
  myDisplay.innerHTML = '<span>hostElement.shadowRoot ist vorhanden.</span>';
} else
{
  myDisplay.innerHTML = '<span>hostElement.shadowRoot gibt es nicht, also ist mode: "closed"</span>';
}

Screenshot 3

Hier wird nur geprüft, ob es die Eigenschaft shadowRoot gibt. Welchen Effekt das hat, wird sich im nächsten Abschnitt zeigen. Im Browser sehen wir jetzt dieses Bild:
Darstellung wie beschrieben Geöffnet im Browser sehen wir die Überschrift und zwei leere Boxen, eine rot und eine grün umrandet.

mode:"closed"

Die Methode attachShadow() wurde mit einem Objekt als Argument aufgerufen, dessen einzige Eigenschaft mode den Wert "open" hat. Ein anderer wichtiger Wert ist "closed"
Aufpassen: nicht "close" !
Wir ändern unseren Code entsprechend ab: 
const myShadowRoot = hostElement.attachShadow({ mode: "closed" });

Screenshot 4

Darstellung wie beschrieben Und nun sehen wir im Display den anderen Text.
Die Darstellung des Codes im Shadow DOM bleibt unverändert, aber die Eigenschaft shadowRoot steht nicht mehr zur Verfügung. Das Beispiel hier zum Anschauen.