This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
<shadow> element—an obsolete part of the Web Components technology suite—was intended to be 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.
|Content categories||Transparent content.|
|Permitted content||Flow content.|
|Tag omission||None, both the starting and ending tag are mandatory.|
|Permitted parents||Any element that accepts flow content.|
|Permitted ARIA roles||None|
This element includes the global attributes.
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.
This element is no longer defined by any specifications.
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support||35||28 (28)||No support||26||No support|
|Feature||Android||Firefox Mobile (Gecko)||IE Phone||Opera Mobile||Safari Mobile|
|Basic support||37||28.0 (28)||No support||?||?|
 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.