Skip to content

Attaching Shadow DOM — Complete Guide

DodaTech Updated 2026-06-28 2 min read

In this tutorial, you will learn about Attaching Shadow Dom. We cover key concepts, practical examples, and best practices to help you master this topic.

Attaching Shadow DOM involves calling attachShadow on a host element, creating a shadow root that encapsulates a subtree with scoped styles.

What You'll Learn

  • Which elements support attachShadow
  • How to populate the shadow tree
  • The restrictions on attachShadow
  • How to check if an element already has a shadow root

Why It Matters

Attaching shadow DOM is the foundation of Encapsulation. Knowing which elements support it and how to populate it correctly is essential.

flowchart LR
  A[Host Element] --> B{Supports shadow?}
  B -->|Yes| C[attachShadow]
  B -->|No| D[Error]
  C --> E[Populate shadow tree]
  E --> F[innerHTML / appendChild]

Supported Elements

// Elements that support shadow DOM:
// - Most custom elements
// - div, span, section, article, main, header, footer, nav, aside
// - p, h1-h6, blockquote, pre
// - Any article-level element

// Elements that do NOT support shadow DOM:
// - img, input, textarea, select, button
// - iframe, embed, object
// - canvas, video, audio
// - br, hr, wbr

try {
    const div = document.createElement('div');
    div.attachShadow({ mode: 'open' });
    console.log('div supports shadow');
} catch (e) {
    console.log('div does not support shadow');
}

try {
    const img = document.createElement('img');
    img.attachShadow({ mode: 'open' });
    console.log('img supports shadow');
} catch (e) {
    console.log('img does not support shadow:', e.message);
}

Populating the Shadow Tree

const host = document.querySelector('#my-host');
const shadow = host.attachShadow({ mode: 'open' });

// Method 1: innerHTML (most common)
shadow.innerHTML = `
    <style>
        .container { padding: 16px; background: #f0f0f0; }
        h2 { color: #333; }
        p { color: #666; }
    </style>
    <div class="container">
        <h2>Shadow Title</h2>
        <p>Shadow content</p>
        <slot></slot>
    </div>
`;

// Method 2: DOM methods
// const container = document.createElement('div');
// container.className = 'container';
// const h2 = document.createElement('h2');
// h2.textContent = 'Shadow Title';
// container.appendChild(h2);
// shadow.appendChild(container);

// Method 3: Template clone
// const template = document.getElementById('my-template');
// shadow.appendChild(template.content.cloneNode(true));

Common Mistakes

  1. Attaching shadow to an unsupported element (throws error)
  2. Attaching shadow twice to the same element (throws error)
  3. Forgetting to check if shadow already exists with element.shadowRoot

Practice Questions

  1. Can you attach shadow DOM to an img element? No. It throws a DOMException.
  2. What are three ways to populate a shadow tree? innerHTML, DOM methods, template clone.

Mini Project

Create a page that lists which HTML elements support shadow DOM by attempting attachShadow in a try-catch. Display the results in a table.

What's Next

Lesson 4: Shadow Host and Tree

← Previous Shadow Root Modes — Complete Guide Next → Shadow Host and Tree — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Shadow Dom