HTML · Web Components

Shadow DOM

Learn how to encapsulate styles and markup for true component isolation

Find videos you like?

Save to resource drawer for future reference!

What is Shadow DOM?

A way to attach a hidden, isolated DOM tree to an element

Shadow DOM is a web standard that provides encapsulation for DOM and CSS. It allows you to attach a hidden DOM tree to an element, completely isolated from the main document. Styles defined inside Shadow DOM don't leak out, and styles from the page don't leak in.

Think of It Like a Bubble 🫧

Shadow DOM creates a protective bubble around your component. Styles and scripts inside the bubble don't affect the outside world, and outside styles don't affect what's inside the bubble.

Encapsulation

Styles and markup are completely isolated

Hidden

Shadow DOM tree is hidden from main document

Composable

Use slots to insert content from Light DOM

Shadow DOM Structure

Document

Regular DOM

Shadow Host

Shadow Root

Scoped Styles 🎨

Isolated Markup 📦

🔒 Protected from outside

1. Style Encapsulation

See how Shadow DOM protects styles from global CSS

Shadow DOM Protection

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>🛡️ Shadow DOM Protection</h1>
      <div class="demo-section">
        <h3>1️⃣ Regular DOM (No Protection)</h3>
        <div class="warning">
          This div gets affected by global .warning styles!
        </div>
      </div>
      <div class="demo-section">
        <h3>2️⃣ Shadow DOM (Protected)</h3>
        <div id="shadow-host"></div>
      </div>
      <div style="margin-top: 30px; padding: 20px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 12px; border-left: 4px solid #f59e0b;">
        <strong style="color: #92400e; display: block; margin-bottom: 8px;">💡 Notice the Difference:</strong>
        <p style="color: #78350f; font-size: 14px; line-height: 1.6;">
          The first div gets affected by global .warning styles, but the Shadow DOM version is completely isolated!
        </p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🛡️ How It Works:

Global styles affect regular DOM elements
Create Shadow DOM with attachShadow()
Shadow DOM has its own isolated styles
Global styles cannot penetrate Shadow DOM!

2. Slots for Content Projection

Use slots to insert content from the Light DOM into Shadow DOM

Shadow DOM with Slots

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM with Slots</title>
  </head>
  <body>
    <div class="container">
      <h1>🎰 Slots: Content Projection</h1>
      <!-- Custom element with slotted content -->
      <user-card>
        <span slot="name">Sarah Johnson</span>
        <span slot="role">Senior Developer</span>
        <p slot="bio">
          Passionate about building scalable web applications.
          Love working with modern JavaScript and Web Components!
        </p>
        <img slot="avatar" src="https://i.pravatar.cc/150?img=5" alt="Sarah">
      </user-card>
      <user-card>
        <span slot="name">Michael Chen</span>
        <span slot="role">UI/UX Designer</span>
        <p slot="bio">
          Creating beautiful and intuitive user experiences.
          Advocate for accessible design and user-centered thinking.
        </p>
        <img slot="avatar" src="https://i.pravatar.cc/150?img=12" alt="Michael">
      </user-card>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🎰 Slot Features:

Named slots: Use slot="name" attribute
::slotted(): Style slotted content from Shadow DOM
Fallback content: Default content if slot is empty

3. Open vs Closed Mode

Understanding the difference between open and closed Shadow DOM

Shadow DOM Modes

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open vs Closed Shadow DOM</title>
  </head>
  <body>
    <div class="container">
      <h1>🔓 vs 🔒 Shadow DOM Modes</h1>
      <div class="grid">
        <!-- Open Mode -->
        <div class="demo-card open-mode">
          <h2>🔓 mode: 'open'</h2>
          <p style="color: #6b7280; margin-bottom: 16px;">
            Shadow root is accessible via JavaScript
          </p>
          <div id="open-host"></div>
          <button class="open-btn" onclick="accessOpen()">
            Try to Access Shadow Root
          </button>
          <div id="open-result" class="result"></div>
        </div>
        <!-- Closed Mode -->
        <div class="demo-card closed-mode">
          <h2>🔒 mode: 'closed'</h2>
          <p style="color: #6b7280; margin-bottom: 16px;">
            Shadow root is NOT accessible
          </p>
          <div id="closed-host"></div>
          <button class="closed-btn" onclick="accessClosed()">
            Try to Access Shadow Root
          </button>
          <div id="closed-result" class="result"></div>
        </div>
      </div>
      <div style="background: white; padding: 30px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);">
        <h2 style="color: #667eea; margin-bottom: 16px;">📚 Key Differences</h2>
        <div style="display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
          <div style="padding: 16px; background: #f0fdf4; border-radius: 8px; border-left: 4px solid #10b981;">
            <strong style="color: #065f46; display: block; margin-bottom: 8px;">Open Mode</strong>
            <ul style="color: #047857; font-size: 14px; line-height: 1.8; padding-left: 20px;">
              <li>shadowRoot is accessible</li>
              <li>Can query shadow DOM from outside</li>
              <li>Useful for debugging</li>
              <li>More flexible</li>
            </ul>
          </div>
          <div style="padding: 16px; background: #fef2f2; border-radius: 8px; border-left: 4px solid #ef4444;">
            <strong style="color: #991b1b; display: block; margin-bottom: 8px;">Closed Mode</strong>
            <ul style="color: #b91c1c; font-size: 14px; line-height: 1.8; padding-left: 20px;">
              <li>shadowRoot returns null</li>
              <li>Cannot access from outside</li>
              <li>Better encapsulation</li>
              <li>More secure</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Shadow DOM CSS Selectors

:host

Selects the shadow host element

:host {
  display: block;
  padding: 1rem;
}

:host(.active) {
  background: blue;
}

::slotted()

Styles slotted content

::slotted(*) {
  font-family: inherit;
}

::slotted(p) {
  color: blue;
}

:host-context()

Match host with ancestor selector

:host-context(.dark) {
  background: #000;
  color: #fff;
}

::part()

Style shadow parts from outside

/* In Shadow DOM */
<div part="button">Click</div>

/* From outside */
my-element::part(button) {
  color: red;
}

Best Practices

Do This

✓Use Shadow DOM for style encapsulation
✓Use 'open' mode for debugging and flexibility
✓Provide slots for flexible content projection
✓Use ::part() to expose styleable elements
✓Style :host for theming support

Avoid This

✗Using Shadow DOM for everything (adds complexity)
✗Forgetting about accessibility in Shadow DOM
✗Using 'closed' mode unnecessarily
✗Not providing fallback content for slots
✗Relying on global styles inside Shadow DOM

Browser Support

Shadow DOM is supported in all modern browsers: Chrome 53+, Firefox 63+, Safari 10+, Edge 79+. For older browsers, use the Web Components polyfills.

Previous Topic

Custom Elements

Creating custom HTML elements with the Custom Elements API.

Next Topic

HTML Templates

<template> and <slot> for reusable component templates.

Ask a Question

Have a question about Shadow DOM? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Web Components

Shadow DOM

Learn how to encapsulate styles and markup for true component isolation

Find videos you like?

Save to resource drawer for future reference!

What is Shadow DOM?

A way to attach a hidden, isolated DOM tree to an element

Think of It Like a Bubble 🫧

Shadow DOM creates a protective bubble around your component. Styles and scripts inside the bubble don't affect the outside world, and outside styles don't affect what's inside the bubble.

Encapsulation

Styles and markup are completely isolated

Hidden

Shadow DOM tree is hidden from main document

Composable

Use slots to insert content from Light DOM

Shadow DOM Structure

Document

Regular DOM

Shadow Host

Shadow Root

Scoped Styles 🎨

Isolated Markup 📦

🔒 Protected from outside

1. Style Encapsulation

See how Shadow DOM protects styles from global CSS

Shadow DOM Protection

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>🛡️ Shadow DOM Protection</h1>
      <div class="demo-section">
        <h3>1️⃣ Regular DOM (No Protection)</h3>
        <div class="warning">
          This div gets affected by global .warning styles!
        </div>
      </div>
      <div class="demo-section">
        <h3>2️⃣ Shadow DOM (Protected)</h3>
        <div id="shadow-host"></div>
      </div>
      <div style="margin-top: 30px; padding: 20px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 12px; border-left: 4px solid #f59e0b;">
        <strong style="color: #92400e; display: block; margin-bottom: 8px;">💡 Notice the Difference:</strong>
        <p style="color: #78350f; font-size: 14px; line-height: 1.6;">
          The first div gets affected by global .warning styles, but the Shadow DOM version is completely isolated!
        </p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🛡️ How It Works:

Global styles affect regular DOM elements
Create Shadow DOM with attachShadow()
Shadow DOM has its own isolated styles
Global styles cannot penetrate Shadow DOM!

2. Slots for Content Projection

Use slots to insert content from the Light DOM into Shadow DOM

Shadow DOM with Slots

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM with Slots</title>
  </head>
  <body>
    <div class="container">
      <h1>🎰 Slots: Content Projection</h1>
      <!-- Custom element with slotted content -->
      <user-card>
        <span slot="name">Sarah Johnson</span>
        <span slot="role">Senior Developer</span>
        <p slot="bio">
          Passionate about building scalable web applications.
          Love working with modern JavaScript and Web Components!
        </p>
        <img slot="avatar" src="https://i.pravatar.cc/150?img=5" alt="Sarah">
      </user-card>
      <user-card>
        <span slot="name">Michael Chen</span>
        <span slot="role">UI/UX Designer</span>
        <p slot="bio">
          Creating beautiful and intuitive user experiences.
          Advocate for accessible design and user-centered thinking.
        </p>
        <img slot="avatar" src="https://i.pravatar.cc/150?img=12" alt="Michael">
      </user-card>
    </div>
  </body>
</html>

Live Preview

Loading preview...

🎰 Slot Features:

Named slots: Use slot="name" attribute
::slotted(): Style slotted content from Shadow DOM
Fallback content: Default content if slot is empty

3. Open vs Closed Mode

Understanding the difference between open and closed Shadow DOM

Shadow DOM Modes

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open vs Closed Shadow DOM</title>
  </head>
  <body>
    <div class="container">
      <h1>🔓 vs 🔒 Shadow DOM Modes</h1>
      <div class="grid">
        <!-- Open Mode -->
        <div class="demo-card open-mode">
          <h2>🔓 mode: 'open'</h2>
          <p style="color: #6b7280; margin-bottom: 16px;">
            Shadow root is accessible via JavaScript
          </p>
          <div id="open-host"></div>
          <button class="open-btn" onclick="accessOpen()">
            Try to Access Shadow Root
          </button>
          <div id="open-result" class="result"></div>
        </div>
        <!-- Closed Mode -->
        <div class="demo-card closed-mode">
          <h2>🔒 mode: 'closed'</h2>
          <p style="color: #6b7280; margin-bottom: 16px;">
            Shadow root is NOT accessible
          </p>
          <div id="closed-host"></div>
          <button class="closed-btn" onclick="accessClosed()">
            Try to Access Shadow Root
          </button>
          <div id="closed-result" class="result"></div>
        </div>
      </div>
      <div style="background: white; padding: 30px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);">
        <h2 style="color: #667eea; margin-bottom: 16px;">📚 Key Differences</h2>
        <div style="display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
          <div style="padding: 16px; background: #f0fdf4; border-radius: 8px; border-left: 4px solid #10b981;">
            <strong style="color: #065f46; display: block; margin-bottom: 8px;">Open Mode</strong>
            <ul style="color: #047857; font-size: 14px; line-height: 1.8; padding-left: 20px;">
              <li>shadowRoot is accessible</li>
              <li>Can query shadow DOM from outside</li>
              <li>Useful for debugging</li>
              <li>More flexible</li>
            </ul>
          </div>
          <div style="padding: 16px; background: #fef2f2; border-radius: 8px; border-left: 4px solid #ef4444;">
            <strong style="color: #991b1b; display: block; margin-bottom: 8px;">Closed Mode</strong>
            <ul style="color: #b91c1c; font-size: 14px; line-height: 1.8; padding-left: 20px;">
              <li>shadowRoot returns null</li>
              <li>Cannot access from outside</li>
              <li>Better encapsulation</li>
              <li>More secure</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Shadow DOM CSS Selectors

:host

Selects the shadow host element

:host {
  display: block;
  padding: 1rem;
}

:host(.active) {
  background: blue;
}

::slotted()

Styles slotted content

::slotted(*) {
  font-family: inherit;
}

::slotted(p) {
  color: blue;
}

:host-context()

Match host with ancestor selector

:host-context(.dark) {
  background: #000;
  color: #fff;
}

::part()

Style shadow parts from outside

/* In Shadow DOM */
<div part="button">Click</div>

/* From outside */
my-element::part(button) {
  color: red;
}

Best Practices

Do This

✓Use Shadow DOM for style encapsulation
✓Use 'open' mode for debugging and flexibility
✓Provide slots for flexible content projection
✓Use ::part() to expose styleable elements
✓Style :host for theming support

Avoid This

✗Using Shadow DOM for everything (adds complexity)
✗Forgetting about accessibility in Shadow DOM
✗Using 'closed' mode unnecessarily
✗Not providing fallback content for slots
✗Relying on global styles inside Shadow DOM

Browser Support

Shadow DOM is supported in all modern browsers: Chrome 53+, Firefox 63+, Safari 10+, Edge 79+. For older browsers, use the Web Components polyfills.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Custom Elements

HTML Templates

HTML Code Editor

Building Your Learning Module...

Shadow DOM

Think of It Like a Bubble 🫧

Encapsulation

Hidden

Composable

Shadow DOM Protection

🛡️ How It Works:

Shadow DOM with Slots

🎰 Slot Features:

Shadow DOM Modes

:host

::slotted()

:host-context()

::part()

Do This

Avoid This

Browser Support

Custom Elements

HTML Templates

HTML Code Editor

Shadow DOM

Think of It Like a Bubble 🫧

Encapsulation

Hidden

Composable

Shadow DOM Protection

🛡️ How It Works:

Shadow DOM with Slots

🎰 Slot Features:

Shadow DOM Modes

:host

::slotted()

:host-context()

::part()

Do This

Avoid This

Browser Support