Shadow DOM Basics for Web Components — Complete Guide

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

Shadow DOM provides style and DOM Encapsulation for Web Components, preventing CSS conflicts and isolating component internals from the host page.

What You'll Learn

• How to attach a shadow root to a custom element
• How styles are encapsulated within the shadow tree
• The difference between open and closed shadow modes
• How to style the host element with :host

Why It Matters

Without Shadow DOM, component styles conflict with the host page. A component using .title class might accidentally inherit or override host page styles. Shadow DOM creates a style boundary.

flowchart LR
  A[Custom Element] --> B[attachShadow]
  B --> C[Shadow Tree]
  C --> D[Encapsulated styles]
  C --> E[Internal DOM]
  C --> F[Slots for content]

Attaching Shadow DOM in Custom Elements

class ShadowCard extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
            <style>
                .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
                .title { font-size: 1.2em; font-weight: bold; color: #333; }
                .body { color: #666; }
            </style>
            <div class="card">
                <div class="title"><slot name="title"></slot></div>
                <div class="body"><slot></slot></div>
            </div>
        `;
    }
}
customElements.define('shadow-card', ShadowCard);

:host Styling

class ThemedButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host { display: inline-block; }
                :host(.primary) button { background: #3498db; color: white; }
                :host([disabled]) { opacity: 0.5; pointer-events: none; }
                :host(:hover) button { transform: scale(1.02); }
                button { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
            </style>
            <button><slot></slot></button>
        `;
    }
}
customElements.define('themed-button', ThemedButton);

Common Mistakes

1. Attaching shadow to elements that do not support it (img, input)
2. Attaching shadow twice on the same element
3. Expecting closed mode to provide security (it does not)

Practice Questions

1. How do you attach a shadow root? element.attachShadow({ mode: 'open' })
2. What is the :host pseudo-class for? Styling the custom element itself from within the shadow tree.

Mini Project

Add Shadow DOM to all previous custom elements. Ensure styles are fully encapsulated. Use :host for external theming.

What's Next

Lesson 7: Shadow DOM Styling