Shadow DOMBaseline · Widely available

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.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–52Not supported

53+Supportedsince Aug 31, 2016

Current: 155

Edge

12–18Not supported

79+Supportedsince Jan 15, 2020

Current: 154

Firefox

1–62Not supported

63+Supportedsince Oct 23, 2018

Current: 157

Safari

1–9.1Not supported

10+Supportedsince Sep 20, 2016

Current: 27

MobileChrome Android

18–52Not supported

53+Supportedsince Sep 7, 2016

Current: 155

Firefox Android

4–62Not supported

63+Supportedsince Oct 23, 2018

Current: 157

Safari iOS

1–9.3Not supported

10+Supportedsince Sep 13, 2016

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: attachShadow.

Feature detection

JS · check before using

if ("ShadowRoot" in globalThis) {
  // ShadowRoot is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

dom.spec.whatwg.org#shadow-trees ↗

Usage share

caniuse.com/shadowdomv1 ↗

Sub-features

Support for each part of the feature (15). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
Element.attachShadow	53	79	63	10	53	63	10
Element.attachShadow.options_clonable_parameter	124	124	123	17.4	124	123	17.4
Element.attachShadow.options_delegatesFocus_parameter	53	79	94	13.1	53	94	13.4
Element.attachShadow.options_serializable_parameter	125	125	128	18	125	128	18
Element.shadowRoot	35	79	63	10	35	63	10
Event.composed	53	79	52	10	53	52	10
Event.composedPath	53	79	59	10	53	59	10
Node.getRootNode	54	79	53	10.1	54	53	10.3
Node.isConnected	51	79	49	10	51	49	10
ShadowRoot	53	79	63	10	53	63	10
ShadowRoot.clonable	124	124	123	17.4	124	123	17.4
ShadowRoot.delegatesFocus	53	79	94	15	53	94	15
ShadowRoot.host	53	79	63	10	53	63	10
ShadowRoot.mode	53	79	63	10.1	53	63	10.3
ShadowRoot.serializable	125	125	128	18	125	128	18