Shadow DOM

Understanding Shadow DOM

The Shadow DOM is a part of the Web Components standard in web development, allowing for encapsulation of the internal structure of an element. It enables developers to create isolated DOM trees with scoped styles and behavior, meaning the styles and scripts inside the shadow DOM don’t affect the outside DOM, and vice versa.

Key Concepts

1. Encapsulation: The Shadow DOM ensures that the internal structure (HTML, CSS, and JavaScript) of a component doesn't interfere with the rest of the document. This is important for preventing style clashes and ensuring consistent behavior across different environments.

2. Shadow Root: The shadow DOM starts with a shadow root, which is the root node of the isolated DOM tree. A shadow root can be attached to an element using JavaScript.

3. Open vs Closed Shadow DOM:

   • Open Shadow DOM: Allows access to the shadow DOM through JavaScript by using element.shadowRoot.
   • Closed Shadow DOM: Does not allow access to the shadow DOM from outside scripts. You cannot access it through element.shadowRoot.

4. Light DOM vs Shadow DOM:

   • Light DOM refers to the regular DOM of the document.
   • Shadow DOM is the encapsulated DOM attached to an element, hidden from the light DOM.

5. Style Isolation: Styles defined within the shadow DOM are scoped only to elements inside the shadow tree. They won’t bleed into the light DOM, and external styles won’t affect the shadow DOM elements unless explicitly defined.

Basic Usage Example

Here’s how to use the shadow DOM in React:

// src/MyComponent.js

class MyComponent extends HTMLElement {
  constructor() {
    super();
    
    // Attach a shadow root to this element
    const shadow = this.attachShadow({ mode: 'open' });

    // Add some content and style to the shadow DOM
    shadow.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>Hello from the shadow DOM!</p>
    `;
  }
}

// Define the custom element
customElements.define('my-component', MyComponent);

Use the Web Component in a React Application

// src/App.js
import React, { useEffect } from 'react';
import './MyComponent'; // Import the Web Component

function App() {
  useEffect(() => {
    // Ensure the Web Component is defined before using it
    if (!customElements.get('my-component')) {
      import('./MyComponent');
    }
  }, []);

  return (
    <div className="App">
      <h1>Hello React</h1>
      {/* Use the custom element */}
      <my-component></my-component>
    </div>
  );
}

export default App;

Using Shadow DOM Directly in React Components

import * as React from "react";

function ShadowDOMComponent() {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    const shadowElement = containerRef.current;

    if (!shadowElement.shadowRoot) {
      // Attach a shadow root
      const shadowRoot = shadowElement.attachShadow({ mode: "open" });

      // Add content and style to the shadow root
      shadowRoot.innerHTML = `
        <style>
          p {
            color: green;
          }
        </style>
        <p>Hello from the shadow DOM inside React!!</p>
      `;
    }
  }, []);

  return (
    <>
      <div ref={containerRef}></div>
      <p>Hello</p>
    </>
  );
}

export default ShadowDOMComponent;

/* 
Hello from the shadow DOM inside React!!

Hello
*/