# Shadow DOM

Category: [Rendering & JavaScript](https://seo-geo-glossary.com/en/glossary/category/rendering-javascript/) › [JavaScript & frameworks](https://seo-geo-glossary.com/en/glossary/category/rendering-javascript/javascript-frameworks/) · Also known as: shadow root, shadow tree, web components

The **shadow DOM** is an encapsulated subtree of the DOM that is attached to a regular element on a page. Markup and styles inside it are separated from the rest of the document. The term here describes a web platform feature and has no connection to shadows in design or image editing.

## How does the shadow DOM work?

MDN names four parts. The **shadow host** is the regular element the subtree hangs on. The **shadow tree** is the subtree itself, the **shadow root** is its root node and the **shadow boundary** is where it ends and the normal DOM begins. CSS from the page does not apply inside the shadow tree, and styles inside it stay there. A call like `document.querySelectorAll()` does not return elements from inside a shadow tree.

A shadow root is created in one of two modes. With `open`, scripts reach it through `element.shadowRoot`. With `closed`, that property returns `null`. MDN stresses that closed mode is not a security mechanism.

It is created with `attachShadow()` in JavaScript or declaratively in HTML with a `<template shadowrootmode="open">`. web.dev explains that the declarative variant lets servers render shadow roots into the HTML, and that it reached Baseline Newly available status on August 5, 2024, with support in all three major browser engines.

## What does it mean for SEO?

Google writes that when it renders a page, it flattens the shadow DOM and light DOM content, and that it can only see content that is visible in the rendered HTML. Text inside a shadow tree can therefore be indexed when it shows up in the rendered result. Check the rendered HTML in the URL Inspection tool. For content that matters most, delivering it in the initial HTML is the more robust choice (assessment).

## Example

```html
<info-box>
  <template shadowrootmode="open">
    <style>p { color: #0a5; }</style>
    <p><slot></slot></p>
  </template>
  This text lives in the light DOM and fills the slot.
</info-box>
```

The rule `p { color: #0a5; }` only affects the paragraph inside the component.

## Common mistakes

- **Treating `closed` as protection**: MDN stresses that the mode is not a strong security mechanism. It only signals that the page should not access the internals.
- **Searching with `querySelector` on the document**: `querySelector()` and `querySelectorAll()` do not reach into a shadow tree. Access goes through the shadow root of an open shadow DOM.
- **Leaving out `<slot>`**: Google flattens light DOM and shadow DOM when rendering. If a component does not use the `<slot>` mechanism for light DOM content, Google advises consulting its documentation.
- **Setting `shadowrootmode` afterwards**: Declarative shadow DOM only takes effect while HTML is parsed. On dynamically created elements the attribute does nothing.

## FAQ

**What does the shadow root do?** It is the entry point of the shadow tree and separates it from the page's DOM.

**What is the difference between shadow DOM and virtual DOM?** The shadow DOM is a browser feature for encapsulation. A virtual DOM is a representation of the UI that a JavaScript library such as React keeps in memory and syncs with the real DOM.

## Related terms

- [DOM](https://seo-geo-glossary.com/en/glossary/dom/index.md)
- [DOM size](https://seo-geo-glossary.com/en/glossary/dom-size/index.md)
- [Web components](https://seo-geo-glossary.com/en/glossary/web-components/index.md)
- [Rendered HTML](https://seo-geo-glossary.com/en/glossary/rendered-html/index.md)
- [JavaScript SEO](https://seo-geo-glossary.com/en/glossary/javascript-seo/index.md)

## Sources

- [Using shadow DOM – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM)
- [JavaScript SEO basics – 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)
- [Virtual DOM and Internals – React documentation (legacy)](https://legacy.reactjs.org/docs/faq-internals.html)
- [Fix Search-related JavaScript problems – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript)

---

Last updated: October 8, 2026
URL: https://seo-geo-glossary.com/en/glossary/shadow-dom/