Shadow DOM

Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components.

Baseline Status: Achieved Widely Available on Jul 15, 2022 (Cross-browser Newly Available since Jan 15, 2020).

Desktop Browser Engine Support

Google Chrome

53

Supported

Mozilla Firefox

63

Supported

Apple Safari

10

Supported

Microsoft Edge

79

Supported

Mobile Browser Engine Support

Chrome Android

53

Firefox Android

63

Safari iOS

10

Specifications and References

Specification ↗ Can I Use (shadowdomv1) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

api.Element.attachShadow ↗ api.Element.attachShadow.options_clonable_parameter ↗ api.Element.attachShadow.options_delegatesFocus_parameter ↗ api.Element.attachShadow.options_serializable_parameter ↗ api.Element.shadowRoot ↗ api.Event.composed ↗ api.Event.composedPath ↗ api.Node.getRootNode ↗ api.Node.isConnected ↗ api.ShadowRoot ↗ api.ShadowRoot.clonable ↗ api.ShadowRoot.delegatesFocus ↗ api.ShadowRoot.host ↗ api.ShadowRoot.mode ↗ api.ShadowRoot.serializable ↗