The
<shadow>tag in HTML was used in early versions of the Shadow DOM specification to define the shadow tree for an element.
It acted as a placeholder for shadow DOM content, allowing developers to encapsulate styles and markup from the main document.However, this tag has been deprecated and is no longer supported in modern browsers.
Developers should now use the Shadow DOM API (via JavaScript) instead of the<shadow>tag.
Syntax
<shadow></shadow>Attributes
| Attribute | Description | Value |
|---|---|---|
| None | The <shadow> element does not have any specific attributes. | — |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Tag Example</title>
</head>
<body>
<h2>HTML <shadow> Tag Example</h2>
<!-- The shadow tag is deprecated and not functional in modern browsers -->
<div>
<shadow>
<p>This content was meant to appear inside a shadow DOM.</p>
</shadow>
</div>
<p><strong>Note:</strong> The <shadow> element is obsolete and no longer supported.</p>
</body>
</html>Output
Browser Output
(No visible output — the <shadow> element is ignored by browsers.)
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ❌No | ❌No | ❌No | ❌No | ❌No | ❌No |
Notes
- The
<shadow>tag was part of the early Shadow DOM v0 specification. - It is no longer supported and should not be used in any modern HTML document.
- Instead, use the Shadow DOM v1 API via JavaScript:
const shadow = element.attachShadow({ mode: 'open' });
shadow.innerHTML = `<p>This is inside the shadow DOM.</p>`;- The new API provides better encapsulation and is supported in all modern browsers.
Conclusion
The <shadow> element was an experimental HTML feature for defining shadow DOM content, but it is now deprecated.
Developers should use the modern Shadow DOM API for encapsulation of HTML and CSS instead of this tag.
