Shadow DOM

• Mode: open (shadowRoot accessible) / closed (hidden)
• Style encapsulation: CSS inside does not leak out, outside does not leak in
• : placeholder for light DOM content projection
• ::part() and :host: CSS API for styling shadow from outside
• Browser support: 100% modern browsers (2019+)

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: red; }  /* scoped */
      </style>
      <p><slot>Default</slot></p>
    `;
  }
}
customElements.define('my-card', MyCard);

• Web Streams
• View Transitions

The Shadow DOM is a web standard that allows developers to create a separate, encapsulated DOM tree for a web component. This encapsulation ensures that the styles and scripts defined for the outer document do not interfere with the styles and scripts of the component itself. The Shadow DOM is a crucial part of the Web Components standard, which aims to enhance reusability and maintainability of web applications.

When creating a Shadow DOM, developers typically use the attachShadow() method, which is called on a standard DOM element. This method takes a configuration object, allowing for mode specification:

• open: The shadow tree can be accessed via the shadowRoot property of the host element.
• closed: The shadow tree cannot be accessed from outside the host element.

Here's a simple example:

In this example, a new shadow root is created for the element with the ID my-element, and a paragraph is added to it. This content will not be affected by any styles in the main document.

The Shadow DOM provides several advantages that enhance web development practices. One of the primary benefits is style encapsulation. CSS styles defined in the main document do not affect the inner workings of a component styled with its own Shadow DOM. This isolation allows developers to create reusable components without worrying about style conflicts.

Additionally, Shadow DOM improves code maintainability. By encapsulating functionality and styling within a component, developers can create a clear separation of concerns. Each component can be developed, tested, and maintained independently, which is particularly useful in large applications.

Another significant advantage is the ability to create complex components without polluting the global namespace. This is achieved through the encapsulation provided by Shadow DOM, which prevents outside scripts from accessing or manipulating the internal structure of the component. As a result, components can be more robust and secure.

Furthermore, Shadow DOM enhances performance. By reducing the number of global styles and scripts that need to be loaded and processed, it can lead to faster rendering times and improved overall performance of the web application.

Shadow DOM is widely utilized in various modern web applications to create reusable components that function independently of the surrounding document. Here are some practical use cases:

• Custom Elements: Developers can create custom HTML elements that encapsulate their functionality. For example, a custom <my-modal> element can be designed to manage its own styles and scripts using Shadow DOM.
• UI Libraries: Many UI component libraries, such as LitElement or Stencil, leverage Shadow DOM to provide reusable components that can be easily integrated into any web application without style conflicts.
• Web Applications: Applications like Google Docs and YouTube Player use Shadow DOM to encapsulate their complex UI elements, allowing for modular development and easier maintenance.

To implement a Shadow DOM in a custom element, you can follow these steps:

In this example, MyElement encapsulates its styles and structure, making it reusable and isolated from the external document.