HTML - <shadow>
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.
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.
Description
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 |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 35 | 28 (28)[1] | Not supported | 26 | Not supported |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 37 | 28.0 (28)[1] | Not supported | ? | ? |
[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.
See Also
Specifications
Specification | Status | Comment |
---|---|---|
Shadow DOM The definition of 'shadow' in that specification. |
Working Draft |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/shadow