Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <shadow> Tag (Obsolete)

Written by Updated

The experimental <shadow> element from Shadow DOM v0 is obsolete and unsupported.

The <shadow> element was an experimental insertion point from the old Shadow DOM v0 model. It is obsolete, is not part of current HTML, and must not be used.

Standards Status

ItemStatus
Current statusObsolete and unsupported
Valid in modern HTMLNo
Historical technologyShadow DOM v0
Use insteadattachShadow(), <slot>, or <template shadowrootmode>

Historical Syntax

You may encounter this markup in old experiments. Modern browsers do not provide the original Shadow DOM v0 behavior.

Obsolete <shadow> syntax — do not use

html

<shadow></shadow>

Modern Shadow DOM Example

Modern Shadow DOM with attachShadow()

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Shadow DOM Example</title>
</head>
<body>
  <div id="host"></div>

  <script>
    const host = document.getElementById("host");
    const shadowRoot = host.attachShadow({ mode: "open" });
    shadowRoot.innerHTML = "<p>This content is inside a modern shadow root.</p>";
  </script>
</body>
</html>

Declarative Shadow DOM Example

Modern declarative shadow DOM

html

<div>
  <template shadowrootmode="open">
    <style>p { color: teal; }</style>
    <p>This content is inside a declarative shadow root.</p>
  </template>
</div>

Important Points

  • Do not use the obsolete <shadow> element.
  • Use attachShadow() to create a shadow root with JavaScript.
  • Use <slot> for content insertion inside a modern shadow tree.
  • Use <template shadowrootmode> when declarative shadow DOM is appropriate.

Conclusion

The old <shadow> tag should appear only in historical documentation. Modern projects should use the current Shadow DOM API, slots, or declarative shadow DOM.

PreviousHTML <template> TagNextHTML <center> Tag