HTML <shadow> Tag

What You’ll Learn

The <shadow> tag was part of an experimental Shadow DOM feature. This guide explains its deprecated status, historical syntax, and the modern attachShadow() API beginners should use instead.

What Is the <shadow> Tag?

The <shadow> tag was introduced to help developers create encapsulated DOM trees (shadow DOMs) within a web component. The shadow DOM allows better modularity and style encapsulation in web development.

🚫 Deprecated Status

The <shadow> tag is now deprecated and should not be used in modern web development. It was part of an early implementation of the Shadow DOM specification but has been replaced by more robust and standardized methods.

📝 Syntax

The historical syntax encapsulated content that was intended to be part of the shadow DOM:

<shadow>
  <!-- Shadow DOM content here -->
</shadow>

Since the tag is deprecated, this syntax should be avoided in favor of the Shadow DOM API shown in the Alternatives section.

Historical Use Inside Custom Elements

<my-element>
  <shadow>
    <style>
      p { color: red; }
    </style>
    <p>This is shadow DOM content.</p>
  </shadow>
</my-element>

⚖️ <shadow> vs attachShadow()

Examples Gallery

Compare the historical shadow syntax with the modern Shadow DOM API you should use in real projects.

<my-element>
  <shadow>
    <style>
      p { color: red; }
    </style>
    <p>This is shadow DOM content.</p>
  </shadow>
</my-element>

<my-element></my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = \`
        <style>
          p { color: red; }
        </style>
        <p>This is shadow DOM content.</p>
      \`;
    }
  }
  customElements.define('my-element', MyElement);
</script>

♿ Accessibility

• Do not use deprecated shadow markup — It provides no encapsulation and may confuse maintainers.
• Shadow DOM and ARIA — When using attachShadow(), ensure interactive elements inside shadow roots remain keyboard accessible.
• Focus management — Custom elements should not trap focus unless building intentional modal UI.
• Expose meaningful names — Use accessible labels on controls rendered inside shadow DOM.

💡 Best Practices

Given the deprecated status of the <shadow> tag, avoid using it altogether. Adopt the modern Shadow DOM API for encapsulated DOM structures.