Shadow DOM: Encapsulation in Web Components

Shadow DOM is browser technology that allows creating encapsulated DOM trees inside elements.
It isolates HTML, CSS and JS to avoid conflicts with external page styles and scripts.

Why Shadow DOM?

How to Use Shadow DOM

Created via .attachShadow() method:

<div id="my-element"></div>

<script>
  const host = document.getElementById("my-element");
  const shadow = host.attachShadow({ mode: "open" });

  shadow.innerHTML = `
    <style>
      p { color: red; }
    </style>
    <p>Hello from Shadow DOM!</p>
  `;
</script>

• mode: "open" — allows accessing shadowRoot from outside via JS.
• mode: "closed" — makes shadowRoot completely private.

Structure

• Custom Element — custom HTML tag (e.g., <my-modal>).
• Shadow Root — root of isolated tree.
• Shadow DOM Tree — component content (internal HTML + styles).
• Light DOM — content passed inside tag as regular children.

Web Component Example

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = `
      <style>p { color: blue; }</style>
      <p>I'm in shadow</p>
    `;
  }
}

customElements.define('my-element', MyElement);

Now in HTML:

<my-element></my-element>

Component will render, but its styles won't conflict with external ones.

When to Use Shadow DOM?

Suitable for:

• Web Components (e.g., <my-button>, <user-card>)
• UI libraries with own styles (without conflicts)
• Encapsulating logic and markup

Not required if:

• You work within frameworks (React, Vue) that solve isolation differently
• Components don't require strict isolation from external CSS