HTML Tags
HTML <shadow> Tag (Obsolete)
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
| Item | Status |
|---|---|
| Current status | Obsolete and unsupported |
| Valid in modern HTML | No |
| Historical technology | Shadow DOM v0 |
| Use instead | attachShadow(), <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.