HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <shadow> Tag

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.

Syntax

html

<shadow></shadow>

Attributes

AttributeDescriptionValue
NoneThe <shadow> element does not have any specific attributes.-

Example

html

<!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

html

(No visible output — the <shadow> element is ignored by browsers.)

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

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:

html

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.

PreviousHTML <template> TagNextHTML <center> Tag