Shadow DOM: Definition und Bedeutung für SEO

Der Shadow DOM ist ein gekapselter Teilbaum des DOM, der an ein normales Element einer Seite gehängt wird. Markup und CSS darin sind vom Rest der Seite getrennt. Gemeint ist hier die Web-Technik; mit Schatten in Bildern oder mit Webdesign-Effekten hat der Begriff nichts zu tun.

Wie funktioniert der Shadow DOM?

Das Element, an dem der Teilbaum hängt, heißt Shadow Host. Der Teilbaum selbst ist der Shadow Tree, sein Wurzelknoten die Shadow Root, die Trennlinie zum übrigen Dokument die Shadow Boundary. Seiten-CSS wirkt nicht in den Shadow Tree hinein, und CSS darin wirkt nicht nach außen. Auch querySelectorAll() auf dem Dokument findet Elemente im Shadow Tree nicht.

Beim Anlegen gibt es zwei Modi. Bei open erreicht JavaScript den Shadow Tree über element.shadowRoot, bei closed liefert diese Eigenschaft null. MDN weist darauf hin, dass closed kein Sicherheitsmechanismus ist.

Erzeugt wird ein Shadow DOM per JavaScript mit attachShadow() oder direkt im HTML mit einem <template> samt Attribut shadowrootmode. Die zweite Variante heißt Declarative Shadow DOM und eignet sich für Server-Side Rendering, weil der Inhalt schon im ausgelieferten HTML steht. Laut web.dev ist sie seit 5. August 2024 in allen drei großen Browser-Engines verfügbar.

Was bedeutet der Shadow DOM für SEO?

Google lädt eine Seite in einem Headless-Chromium und rendert sie. Dabei werden laut Google Shadow DOM und Light DOM zusammengeführt („flattened“). Inhalte im Shadow Tree zählen also mit, sofern sie im gerenderten HTML sichtbar sind. Was erst nach dem Rendern vorliegt, hängt von der Render-Warteschlange ab, deshalb ist Inhalt im initialen HTML die robustere Wahl (Einschätzung).

Für die Praxis helfen zwei Prüfungen. Im URL-Prüftool der Search Console zeigt das gerenderte HTML, ob der Text aus der Komponente ankommt. Außerdem sollten Inhalte, die über <slot> aus dem Light DOM in die Komponente eingesetzt werden, im gerenderten Ergebnis an der erwarteten Stelle stehen.

Beispiel

HTML

<info-box>
  <template shadowrootmode="open">
    <style>p { color: #0a5; }</style>
    <p><slot></slot></p>
  </template>
  Dieser Text liegt im Light DOM und wird in den Slot eingesetzt.
</info-box>

Die Regel p { color: #0a5; } betrifft nur den Absatz in der Komponente. Absätze der übrigen Seite bleiben unverändert.

Häufige Fehler

closed als Schutz verstehen: MDN betont, dass der Modus kein starker Sicherheitsmechanismus ist. Er zeigt nur an, dass die Seite nicht auf das Innere zugreifen soll.
Mit querySelector im Dokument suchen: querySelector() und querySelectorAll() reichen nicht in den Shadow Tree. Zugriff gibt es nur über die Shadow Root eines offenen Shadow DOM.
<slot> weglassen: Google führt Light DOM und Shadow DOM beim Rendern zusammen. Verwendet eine Komponente keinen <slot> für Inhalte aus dem Light DOM, rät Google, deren Dokumentation zu prüfen.
shadowrootmode nachträglich setzen: Declarative Shadow DOM greift nur beim Parsen von HTML. Auf dynamisch erzeugten Elementen bewirkt das Attribut nichts.

Häufige Fragen

Findet Google Text im Shadow DOM? Ja, wenn er im gerenderten HTML erscheint. Google führt beide Bäume beim Rendern zusammen.

Ist closed ein Schutz vor Crawlern? Nein. Der Modus steuert nur den JavaScript-Zugriff über shadowRoot. Für das Rendern durch den Browser spielt er keine Rolle.

Quellen

Using shadow DOM – MDN Web Docsdeveloper.mozilla.org
Grundlagen zu JavaScript-SEO (Abschnitt Web Components) – Google Search Centraldevelopers.google.com
Declarative Shadow DOM – web.devweb.dev
Fehlerbehebung bei Suchproblemen mit JavaScript – Google Search Centraldevelopers.google.com

Stand: 8. Oktober 2026