Suggest an edit

Improve this article

Refine the answer for “What is Shadow 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)

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

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

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

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

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.