What is Shadow DOM?

JavaScriptMiddle~3 min read

Definition

The Shadow DOM is an isolated tree of DOM elements nested inside an element, but not directly reachable from the main (light) DOM.

In other words: the Shadow DOM is a "mini-DOM inside an element", with its own tags, styles, and logic, which does not affect the rest of the document and is not affected by its styles either.

Example without Shadow DOM

javascript

<div class="card">
  <h2>Profile</h2>
  <button>Add</button>
</div>

If the page has this CSS:

javascript

button {
  background: red;
}

All buttons will turn red, even inside cards, even in components where you didn't want that. That is, the styles "leak" in.

1. What Shadow DOM does

Shadow DOM solves this problem:

it creates an encapsulated DOM (an internal structure);
it limits the effect of external CSS;
it protects a component's internal elements from outside changes.

2. Example of creating a Shadow DOM

javascript

<div id="host"></div>

<script>
  const host = document.querySelector('#host');
  const shadow = host.attachShadow({ mode: 'open' });

  shadow.innerHTML = `
    <style>
      p { color: blue; }
    </style>
    <p>Hello from the Shadow DOM!</p>
  `;
</script>

On the page you'll see the blue text "Hello from the Shadow DOM!", but if the global styles have:

javascript

p { color: red; }

that style won't affect the text inside the Shadow DOM.

3. Shadow DOM modes

javascript

element.attachShadow({ mode: 'open' });

Mode	What it means
`"open"`	The shadow tree can be accessed via `element.shadowRoot`
`"closed"`	Access is forbidden, `shadowRoot` will be `null`

Example:

javascript

const root = el.attachShadow({ mode: 'open' });
console.log(el.shadowRoot); // accessible

const root2 = el.attachShadow({ mode: 'closed' });
console.log(el.shadowRoot); // null

4. Structure: Light DOM vs Shadow DOM

javascript

<body>
  <my-button> <!-- host -->
    #shadow-root
      <button>Click</button>
  </my-button>
</body>

The <my-button> element is the host (the owner of the shadow tree). What's inside #shadow-root is the isolated Shadow DOM.

5. Shadow DOM in action (a mini component)

javascript

<template id="my-button">
  <style>
    button {
      background: dodgerblue;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
    }
  </style>
  <button>Click me</button>
</template>

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const tmpl = document.getElementById('my-button').content.cloneNode(true);
      shadow.appendChild(tmpl);
    }
  }

  customElements.define('my-button', MyButton);
</script>

<my-button></my-button>

This produces a real web component:

it can be dropped into any page;
it has its own markup and styles;
global styles don't break it.

6. Advantages of Shadow DOM

Advantage	Description
Encapsulation	Internal styles and DOM are isolated from the outside world
Predictability	Styles don't "leak" in or out
Reusability	You can build reusable components
Performance	Fewer style recalculations for isolated areas
Safety	You can't accidentally change a component's internal markup

7. Where Shadow DOM is used

In built-in HTML elements:

<video>
<audio>
<input type="range">
<details> / <summary>

If you open DevTools and enable "Show user agent shadow DOM", you'll see hidden elements inside them (buttons, sliders, and so on).

In Web Components, all modern libraries (Lit, Stencil, Vue 3 Custom Elements, Ionic, Shoelace) use Shadow DOM under the hood.

8. Interacting with the Shadow DOM

From the main DOM inward

You can pass content in using <slot>:

javascript

<my-card>
  <h2 slot="title">Title</h2>
</my-card>

javascript

<!-- inside the Shadow DOM -->
<slot name="title"></slot>

This is the mechanism for "inserting content" into a component.

Summary

Concept	Description
Shadow DOM	An isolated tree of elements inside a component
Host	The element inside which the Shadow DOM is created
Light DOM	The regular part of the document
Encapsulation	Styles and DOM don't affect each other
Used for	Web Components, style isolation, built-in elements

Keep it simple: Shadow DOM is a "mini-universe inside an element", where you have your own DOM, your own styles, and no conflict with the outside world.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.