Suggest an edit

Improve this article

Refine the answer for “Shadow DOM vs DOM”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts636 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.