# Shadow DOM

Kategorie: [Rendering & JavaScript](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/) › [JavaScript & Frameworks](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/javascript-frameworks/)

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.

## Verwandte Begriffe

- [DOM](https://seo-geo-glossary.com/de/glossar/dom/index.md)
- [DOM-Größe](https://seo-geo-glossary.com/de/glossar/dom-groesse/index.md)
- [Web Components](https://seo-geo-glossary.com/de/glossar/web-components/index.md)
- [Gerendertes HTML](https://seo-geo-glossary.com/de/glossar/gerendertes-html/index.md)
- [JavaScript-SEO](https://seo-geo-glossary.com/de/glossar/javascript-seo/index.md)

## Quellen

- [Using shadow DOM – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM)
- [Grundlagen zu JavaScript-SEO (Abschnitt Web Components) – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [Declarative Shadow DOM – web.dev](https://web.dev/articles/declarative-shadow-dom)
- [Fehlerbehebung bei Suchproblemen mit JavaScript – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript)

---

Stand: 8. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/shadow-dom/