Logo
Tutorials Articles Code Playground
Sign In Get Started
Module: Advanced DOM

Shadow DOM

JavaScript Essentials: Advanced DOM - Shadow DOM

The Shadow DOM is a crucial web standard that allows for encapsulation of HTML, CSS, and JavaScript. It's a powerful tool for building reusable components and preventing style collisions. Here's a breakdown of Shadow DOM in markdown format:

What is Shadow DOM?

  • Encapsulation: The core idea behind Shadow DOM is to create a hidden, isolated DOM tree attached to a regular DOM element. This isolation prevents styles and scripts from the main document from affecting the Shadow DOM, and vice-versa.
  • Componentization: It's fundamental to building Web Components, allowing you to create self-contained, reusable UI elements.
  • Scoped Styles: Styles defined within the Shadow DOM only apply to elements inside that Shadow DOM. This avoids the "CSS cascade" problems where global styles unintentionally affect component internals.
  • DOM Tree Isolation: The Shadow DOM tree is separate from the main document's DOM tree. This means queries like document.querySelector() won't penetrate into the Shadow DOM unless specifically designed to.

Why Use Shadow DOM?

  • Prevent Style Conflicts: Avoids accidental style overrides between your component and the surrounding page.
  • Simplify Component Development: Allows you to write component code without worrying about global styles or scripts interfering.
  • Code Reusability: Creates truly reusable components that can be dropped into any web page without breaking existing styles.
  • Maintainability: Encapsulation makes components easier to understand, modify, and maintain.
  • Web Components Standard: Essential for building standards-compliant Web Components.

Key Concepts & Terminology

  • Shadow Host: The regular DOM element to which the Shadow DOM is attached. This is the element you'll use to create the Shadow DOM.
  • Shadow Tree: The DOM tree inside the Shadow DOM. It contains the encapsulated HTML, CSS, and JavaScript.
  • Shadow Root: The root node of the Shadow Tree. You obtain this when you create the Shadow DOM.
  • Slot: A placeholder within the Shadow DOM that allows content from the light DOM (the regular DOM) to be inserted into the Shadow DOM. This enables customization of the component.
  • Light DOM: The regular DOM content that is outside the Shadow DOM.
  • Flattened DOM Tree: The result of combining the main DOM tree and the Shadow DOM trees. The browser handles this automatically.

Creating a Shadow DOM

You create a Shadow DOM using the attachShadow() method on a DOM element.

const myElement = document.querySelector('#my-element');

// Create a Shadow DOM with 'open' mode (more on modes below)
const shadowRoot = myElement.attachShadow({ mode: 'open' });

// Add content to the Shadow DOM
shadowRoot.innerHTML = `
  <style>
    p { color: blue; }
  </style>
  <p>This is inside the Shadow DOM!</p>
`;

mode Options:

  • 'open': Allows JavaScript from the main document to access the Shadow DOM using the shadowRoot property of the host element. (e.g., myElement.shadowRoot).
  • 'closed': Prevents JavaScript from the main document from accessing the Shadow DOM. myElement.shadowRoot will return null. This provides stronger encapsulation but makes testing and debugging more difficult. Use with caution.

Accessing Elements within the Shadow DOM

If the Shadow DOM is in 'open' mode, you can access its contents:

const myElement = document.querySelector('#my-element');
const shadowRoot = myElement.shadowRoot;

if (shadowRoot) {
  const paragraph = shadowRoot.querySelector('p');
  paragraph.textContent = 'Content changed from outside!';
}

If the Shadow DOM is in 'closed' mode, you cannot access its contents from outside.

Using Slots for Content Projection

Slots allow you to inject content from the light DOM into the Shadow DOM. This is how you make your components customizable.

<!-- Light DOM -->
<my-component>
  <p>This content will be projected into the slot.</p>
  <span>Another piece of content.</span>
</my-component>

<!-- Component Definition (JavaScript) -->
const template = document.createElement('template');
template.innerHTML = `
  <style>
    .container { border: 1px solid black; padding: 10px; }
  </style>
  <div class="container">
    <h2>My Component</h2>
    <slot></slot>  <!-- This is the slot -->
  </div>
`;

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-component', MyComponent);

In this example:

  • <slot></slot> in the Shadow DOM defines a slot.
  • The <p> and <span> elements inside <my-component> in the light DOM are projected into the slot.
  • The content appears within the div.container in the Shadow DOM.

Slot Attributes:

  • name: Allows you to create named slots. This lets you control where content is projected.
<slot name="header"></slot>
<slot name="footer"></slot>

<my-component>
  <span slot="header">This is the header content.</span>
  <p slot="footer">This is the footer content.</p>
</my-component>

Styling Shadow DOM

  • Scoped Styles: Styles defined within the Shadow DOM only apply to elements inside the Shadow DOM.
  • CSS Custom Properties (Variables): You can use CSS custom properties to allow some styling control from the outside.
  • ::part() pseudo-element: Allows styling of specific parts of a component from the outside.
  • ::slotted() pseudo-element: Allows styling of content projected into a slot.
/* Inside the Shadow DOM */
:host {
  display: block;
  border: 1px solid gray;
  padding: 10px;
}

/* Styling slotted content */
::slotted(p) {
  font-style: italic;
}

/* Styling a part of the component */
:part(button) {
  background-color: lightblue;
}

Benefits of Shadow DOM in Web Components

  • True Encapsulation: Shadow DOM is the cornerstone of Web Component encapsulation.
  • Simplified Component Design: You can focus on the component's internal logic without worrying about external interference.
  • Improved Code Organization: Components become self-contained units of functionality.
  • Increased Reusability: Components can be easily reused across different projects.

Resources

This overview provides a solid foundation for understanding and using Shadow DOM. Experimenting with these concepts is the best way to master them and unlock the power of Web Components.