Widely available Supported across all major browsers. Safe to use in production.

Shadow DOM

The attachShadow() method of the Element interface attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.

Web Components

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ShadowRoot
53
79
63
10
53
10
attachShadow

The Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.
53
79
63
10
53
10
attachShadow (options clonable parameter)

A boolean that specifies whether the shadow root is clonable: when set to true, the shadow host cloned with Node.cloneNode() or Document.importNode() will include shadow root in the copy. Its default value is false.
124
124
123
17.4
124
17.4
attachShadow (options delegatesFocus parameter)

A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling. Its default value is false.
53
79
94
13.1
53
13.4
attachShadow (options serializable parameter)

A boolean that, when set to true, indicates that the shadow root is serializable. If set, the shadow root may be serialized by calling the Element.getHTML() or ShadowRoot.getHTML() methods with the options.serializableShadowRoots parameter set true. Its default value is false.
125
125
128
18
125
18
shadowRoot

The Element.shadowRoot read-only property represents the shadow root hosted by the element.
35
79
63
10
35
10
composed

The read-only composed property of the Event interface returns a boolean value which indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM.
53
79
52
10
53
10
composedPath

The composedPath() method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.
53
79
59
10
53
10
getRootNode

The getRootNode() method of the Node interface returns the context object's root, which optionally includes the shadow root if it is available.
54
79
53
10.1
54
10.3
isConnected

The read-only isConnected property of the Node interface returns a boolean indicating whether the node is connected (directly or indirectly) to a Document object.
51
79
49
10
51
10
clonable

The clonable read-only property of the ShadowRoot interface returns true if the shadow root is clonable, and false otherwise.
124
124
123
17.4
124
17.4
delegatesFocus

The delegatesFocus read-only property of the ShadowRoot interface returns true if the shadow root delegates focus, and false otherwise.
53
79
94
15
53
15
host

The host read-only property of the ShadowRoot returns a reference to the DOM element the ShadowRoot is attached to.
53
79
63
10
53
10
mode

The mode read-only property of the ShadowRoot specifies its mode — either open or closed. This defines whether or not the shadow root's internal features are accessible from JavaScript.
53
79
63
10.1
53
10.3
serializable

The serializable read-only property of the ShadowRoot interface returns true if the shadow root is serializable.
125
125
128
18
125
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: cloneable (16.4)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: cloneable (16.4)
Notes 1 item(s)
Implementation note
  • Before Firefox 95, this property was incorrectly set to `false` on `<select>` and `<input type='checkbox'>` elements.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (53)
Implementation note
  • Previously available under a different name: deepPath (50)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (53)
Implementation note
  • Previously available under a different name: deepPath (50)

Syntax

JAVASCRIPT 
attachShadow(options)

Use cases

  • Using Shadow DOM

    The attachShadow() method of the Element interface attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links