Summary
The HTML <shadow> element is used as a shadow DOM insertion point. You might use it if you have created multiple shadow roots under a shadow host. It is not useful in ordinary HTML. It is used with Web Components.
| Content categories | Transparent content. |
|---|---|
| Permitted content | Flow content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parent elements | Any element that accepts flow content. |
| DOM interface | HTMLShadowElement |
Attributes
This element includes the global attributes.
Example
Here is a simple example of using the <shadow> element. It is an HTML file with everything needed in it.
Note: This is an experimental technology. For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.
<html>
<head></head>
<body>
<!-- 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 shadowroot1 = origContent.createShadowRoot();
// Create the second shadow root
var shadowroot2 = origContent.createShadowRoot();
// Insert something into the older shadow root
shadowroot1.innerHTML =
'<p>Older shadow root inserted by <shadow></p>';
// Insert into younger shadow root, including <shadow>.
// The previous markup will not be displayed unless
// <shadow> is used below.
shadowroot2.innerHTML =
'<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>';
</script>
</body>
</html>
If you display this in a web browser it should look like the following.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Shadow DOM The definition of 'shadow' in that specification. |
Working Draft |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 35 | 28 (28)[1] | No support | 26 | No support |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 37 | 28.0 (28)[1] | No support | ? | ? |
[1] If Shadow DOM is not enabled in Firefox, <shadow> elements will behave like HTMLUnknownElement. Shadow DOM was first implemented in Firefox 33 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.