Shadow DOM: Definition, Modes and Google Rendering

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.

Sources

Using shadow DOM – MDN Web Docsdeveloper.mozilla.org
JavaScript SEO basics – Google Search Centraldevelopers.google.com
Declarative shadow DOM – web.devweb.dev
Virtual DOM and Internals – React documentation (legacy)legacy.reactjs.org
Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com

Last updated: October 8, 2026