<shadow>

HTML `<shadow>` (Shadow Root) Tag

Deprecated: Not Supported in HTML5.

Example

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

<script>
// 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>';
</script>

Try this code ❯

Meaning

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

<shadow>...</shadow>

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>