FRONT END

Home › Glossary › Front End· 376 ·

Shadow DOM

\\sha-doe dom\\n.

Filed underFront EndSoftware EngineeringArchitecture

In brief · quick answer

Shadow DOM is a browser API that provides DOM and style encapsulation. It allows developers to attach a hidden, scoped DOM tree to an element, isolating its styles and markup from the rest of the document.

§ 1 Definition

Shadow DOM is a browser specification that enables DOM encapsulation and style scoping for web components. It allows a developer to attach a hidden DOM subtree (the shadow tree) to a regular DOM element (the shadow host). The shadow tree is rendered separately from the main document DOM: CSS selectors from the outer page do not apply inside the shadow tree, and CSS rules defined inside the shadow tree do not leak out. This solves the longstanding CSS specificity and naming collision problems that plague large applications, where adding a new component can accidentally break existing styles. Shadow DOM is one of the three core technologies of Web Components, along with Custom Elements and HTML Templates. It is a browser-native feature, not a library concept. Using Shadow DOM does not require any framework, though frameworks (Angular emulated encapsulation, Vue scoped styles, Svelte scoped CSS) provide similar encapsulation at the build level without using actual Shadow DOM.

§ 2 Encapsulation Modes

Shadow DOM can be attached in two modes. Open mode (`{ mode: 'open' }`) makes the shadow root accessible from outside via `element.shadowRoot`. This allows external JavaScript to access and modify the shadow tree. Closed mode (`{ mode: 'closed' }`) makes the shadow root inaccessible externally (`element.shadowRoot` returns null). Closed mode is rarely used in practice because it breaks tooling, test frameworks, and accessibility tools.

§ 3 Slots and Composition

Shadow DOM uses `<slot>` elements as placeholders for projecting light DOM content into the shadow tree. This enables composition: a custom element can define an internal structure (shadow DOM) while accepting external content from the page. Named slots (`name="header"`) allow multiple projection points within a single shadow tree. The `<slot>` element renders the projected content without moving it in the actual DOM, creating a visual composition without altering the document tree hierarchy.

§ 4 Note

Common misunderstanding: Shadow DOM and Virtual DOM are completely different concepts that share only the word 'DOM.' Shadow DOM is a browser API for encapsulation. Virtual DOM is an in-memory data structure used by frameworks for efficient rendering. They solve different problems and are not interchangeable. Another misconception: CSS encapsulation from frameworks (Vue scoped styles, CSS Modules) is the same as Shadow DOM. Framework-level encapsulation uses attribute selectors or unique class names to scope styles. These approaches can be penetrated by higher-specificity selectors. Shadow DOM provides true encapsulation that cannot be bypassed by CSS alone.

§ 5 In code

```javascript
const host = document.getElementById('my-widget');
const shadow = host.attachShadow({ mode: 'open' });

shadow.innerHTML = `
  <style>
    /* These styles only apply inside this shadow tree */
    .wrapper { border: 1px solid #ccc; padding: 16px; border-radius: 8px; }
    h2 { color: #333; margin: 0 0 8px; }
    ::slotted(p) { color: #666; }
  </style>
  <div class="wrapper">
    <h2>Widget Title</h2>
    <slot></slot>
  </div>
`;
```

§ 6 Common questions

Q. Can I use Shadow DOM with React?: A. Yes, but it is awkward. React renders into a single root element. To use Shadow DOM, you must attach a shadow root to that element and render into it. React 19 has improved support with `hydrateRoot` into shadow roots.
Q. Does Shadow DOM affect performance?: A. Minimally. Creating a shadow root has some overhead, but this is negligible for most use cases. The performance benefit of style encapsulation (no accidental cascade) usually outweighs the creation cost.

Key takeaways

Shadow DOM provides true DOM and style encapsulation at the browser level.
It is a browser-native API, not a framework feature. It works without any JavaScript library.
Shadow DOM and Virtual DOM are different concepts. Shadow DOM encapsulates; Virtual DOM optimizes rendering.

How Atomic Glue helps

Atomic Glue uses Shadow DOM strategically in projects that need bulletproof style isolation: embeddable widgets, third-party components, and cross-framework design systems. When we build an interactive calculator or widget that clients embed on their own sites, Shadow DOM ensures the widget's styles do not leak and are not affected by host site CSS. This encapsulation is a key requirement for our embeddable component work within our website development services.

Get in touch

# Shadow DOM

Category: Front End (also: Software Engineering, Architecture)

Author: Atomic Glue Development Team

## Definition

## Encapsulation Modes

## Slots and Composition

## Note

## In code

## Common questions
Q: Can I use Shadow DOM with React?
A: Yes, but it is awkward. React renders into a single root element. To use Shadow DOM, you must attach a shadow root to that element and render into it. React 19 has improved support with `hydrateRoot` into shadow roots.
Q: Does Shadow DOM affect performance?
A: Minimally. Creating a shadow root has some overhead, but this is negligible for most use cases. The performance benefit of style encapsulation (no accidental cascade) usually outweighs the creation cost.

## Key takeaways

Shadow DOM provides true DOM and style encapsulation at the browser level.
It is a browser-native API, not a framework feature. It works without any JavaScript library.
Shadow DOM and Virtual DOM are different concepts. Shadow DOM encapsulates; Virtual DOM optimizes rendering.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/shadow-dom