{{ draft }}
Summary
The HTML <shadow>
element is used as a shadow DOM {{glossary("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 {{no_tag_omission}}
- Permitted parent elementsAny element that accepts flow content
- DOM interface {{domxref("HTMLShadowElement")}}
Attributes
This element includes the global attributes.
Example
text goes here
text goes here
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Shadow DOM', "#the-shadow-element", "shadow")}} | {{Spec2('Shadow DOM')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 35 | {{CompatGeckoDesktop("28")}} [1] | {{CompatNo}} | 26 | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 37 | {{CompatGeckoMobile("28")}} [1] | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] If Shadow DOM is not enabled in Firefox, <shadow>
elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, dom.webcomponents.enabled
, which is disabled by default.
See also
- Web Components
- {{HTMLElement("decorator")}}, {{HTMLElement("element")}}, {{HTMLElement("content")}}, {{HTMLElement("template")}}
{{HTMLRef}}