Shadow DOM & Web Components Basics0%
Custom Elements Lifecycle (connectedCallback)

Shadow DOM & Web Components Basics

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Shadow DOM & Web Components Basics

A long-standing challenge in web development is CSS encapsulation: a global style rule like p { color: red } or button { padding: 10px } easily leaks into third-party widgets, breaking layouts. Web Components and the Shadow DOM solve this by providing native, browser-level component encapsulation for markup and styles.

1. The 3 Pillars of Web Components

  1. 1
    Custom Elements: APIs to define new HTML tags (e.g. <user-card>, <video-player>).
  2. 2
    Shadow DOM: An encapsulated DOM subtree isolated from the main document's styles and scripts.
  3. 3
    HTML Templates (<template> & <slot>): Reusable markup fragments rendered dynamically.

2. Light DOM vs. Shadow DOM

Output
Light DOM (Regular Page DOM)
├── <h1>Global Heading</h1> (Styled by global.css)
└── <user-badge> ───────────┐
▼
Shadow Root (#shadow-root)
├── <style>h1 { color: blue; }</style> <── SCOPED!
└── <h1>Component Heading</h1> <── Isolated!
  • Light DOM: The standard DOM tree. Global CSS and scripts apply freely.
  • Shadow Root: The boundary attached to an element. Styles inside cannot leak out, and global styles cannot penetrate in!

3. Creating a Shadow Root: attachShadow()

You attach a shadow root to any standard or custom element using attachShadow({ mode: 'open' | 'closed' }):

HTML
<div id="host-element"></div>
 
<script>
const host = document.querySelector('#host-element');
// Attach open shadow root
const shadow = host.attachShadow({ mode: 'open' });
 
// Add encapsulated styles and markup
shadow.innerHTML = `
<style>
/* These styles affect ONLY elements inside this Shadow DOM! */
h2 {
color: #4f46e5;
font-family: sans-serif;
border-bottom: 2px solid #4f46e5;
}
p { color: #64748b; }
</style>
<h2>Encapsulated Widget</h2>
<p>Global CSS styles cannot override this text!</p>
`;
</script>

4. open vs. closed Mode

  • mode: 'open' (Recommended): Accessible from JavaScript via element.shadowRoot. Enables testing and developer inspection.
  • mode: 'closed': element.shadowRoot returns null. Rarely used because it offers no true security and hinders testing.

5. Composition with <slot>

The <slot> element acts as a placeholder for content projected from the parent Light DOM into the Shadow DOM:

HTML
<fancy-card>
<!-- Light DOM Content -->
<span slot="title">Enterprise Security</span>
<p slot="body">Native isolation powered by W3C standards.</p>
</fancy-card>
HTML
<!-- Inside fancy-card Shadow DOM Template -->
<div class="card">
<div class="card-header"><slot name="title"></slot></div>
<div class="card-body"><slot name="body"></slot></div>
</div>
Interactive Quiz

Practice Quiz

Question 1
What problem does the Shadow DOM primarily solve in web development?
Question 2
What method is used to create and attach a Shadow DOM to an element?
Question 3
What is the difference between mode: 'open' and mode: 'closed' when attaching a shadow root?
Question 4
What HTML element serves as an insertion point for projecting Light DOM content into a Shadow DOM component?
Question 5
Can global page styles like body { font-family: Arial; } penetrate and style elements inside an open Shadow DOM?
Next Lesson

Custom Elements Lifecycle (connectedCallback)

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Defensive Programming & InvariantsCustom Elements Lifecycle (connectedCallback)

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext