HTML <shadow> (Shadow Root) Tag

❮ Previous Reference Next ❯

Deprecated: Not Supported in HTML5.


<!-- This <div> will hold the shadow roots. -->
<!-- This heading will not be displayed -->
<h4>My Original Heading</h4>

// Get the <div> above with its content
var origContent = document.querySelector('div');
// Create the first shadow root
var shadowroot = origContent.createShadowRoot();
// Insert something into the older shadow root
shadowroot.innerHTML = '<p>Older shadow root inserted by <shadow></p>';


The <shadow> HTML is used as a shadow DOM insertion point. You might have used it if you have created multiple shadow roots under a shadow host.

It is not useful in ordinary HTML.

Version: HTML5

Standard Syntax


Browser Support


Global Attributes

The <shadow> element also supports the Global Attributes in HTML.

Event Attributes

The <shadow> element also supports the Event Attributes in HTML.

Related Tags:

<content>, <slot> and <template>
❮ Previous Reference Next ❯