Shadow DOM vs DOM

JavaScriptJunior~3 min read

1. Definitions

Type	What it is
Regular (Light) DOM	This is the "main" tree of an HTML document - everything you write in HTML and see in DevTools.
Shadow DOM	This is a nested, isolated DOM tree inside an element (a component), which has its own styles, markup, and behavior, and does not affect the outer document.

In other words:

Light DOM is "the surface of the site", Shadow DOM is "the component's insides", hidden from the rest of the world.

2. An example of the difference

Regular DOM

javascript

<div class="card">
  <h2>Header</h2>
  <button>Click</button>
</div>

Everything is visible in the main DOM, you can grab it via document.querySelector('button'). Global styles affect everything (button { color: red; } will make the button red).

Shadow DOM

javascript

const card = document.querySelector('.card');
const shadow = card.attachShadow({ mode: 'open' });

shadow.innerHTML = `
  <style>
    button { color: blue; }
  </style>
  <button>Inner</button>
`;

Now card has an internal Shadow DOM that:

is isolated from outer styles,
is not visible in the main DOM (if mode: 'closed'),
manages its own elements.

Global styles cannot repaint the button from blue → red, because it lives inside its own Shadow tree.

3. Key differences

Characteristic	Regular DOM (Light)	Shadow DOM
Where it lives	In the document tree	Inside a "host" element
Visible in DevTools	Yes	Yes (but hidden by default, can be enabled with "Show user agent shadow DOM")
Styling	Subject to global CSS	Isolated from global styles
Isolation	None - styles and JS affect each other	Full - an isolated context
Used in	Any HTML	Web Components, built-in elements (`<video>`, `<input>`, etc.)
Interaction	Direct, via `document.querySelector()`	Only via `shadowRoot.querySelector()`
Slots	None	Yes (`<slot>` for inserting content from the Light DOM)

4. Visually

javascript

<body>
  <my-card>                      ← host element
    #shadow-root (shadow DOM)
      <style>...</style>
      <button>Click</button>
    #light-dom (regular DOM)
      <p slot="content">...</p>
  </my-card>
</body>

my-card is the host element #shadow-root is its internal Shadow DOM Outer elements can pass content inside via <slot>.

5. An example of the interaction

The Light DOM only sees the "shell":

javascript

console.log(document.querySelector('my-card').innerHTML);
// Empty, because the insides are hidden inside the Shadow DOM

The Shadow DOM is accessible only through a reference:

javascript

const shadow = document.querySelector('my-card').shadowRoot;
console.log(shadow.querySelector('button')); // <button>Click</button>

6. Applications of Shadow DOM

It's used when you need to:

Encapsulate a component (web components, UI libraries),
Isolate styles (so global CSS does not break the appearance),
Create a reusable element (for example, <custom-slider>),
Make a component self-contained, like <video> or <select>.

An example from real life

Regular DOM:

You had to redefine button styles across the whole site, and suddenly the buttons in a component "broke" - because the styles are global.

Shadow DOM:

A component with its own styles is isolated, and no global button { color: red } will affect it.

Summary

Criterion	Regular DOM	Shadow DOM
Visibility	Accessible to all code	Hidden and isolated
Styles	Shared	Isolated
Usage	Everyday HTML	Components and built-in elements
Interaction	Via `document`	Via `shadowRoot`
Security	No isolation	Has encapsulation

Remember it simply:

The regular DOM is shared across the whole page.

The Shadow DOM is a separate "mini world" inside an element, with its own styles, logic, and DOM structure.

Short Answer

Interview ready

Premium

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