Web/API/Element/createShadowRoot

From Get docs

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


DeprecatedThis feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


Draft This page is not complete.


Use Element.createShadowRoot to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root.

This method has been deprecated in favor of attachShadow().


Syntax

var shadowroot = element.createShadowRoot();

Parameters

No parameters.

Result value

Returns a ShadowRoot.

Specifications

This feature is no longer defined by any specifications.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

createShadowRoot

Deprecated'Non-standard'

Chrome Full support 35

Notes'

Full support 35

Notes'

Notes' In Chrome 45, the ability to have multiple shadow roots was deprecated. No support 25 — ?

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Edge

Full support 79

Firefox No support 59 — 61

Disabled'

No support 59 — 61

Disabled'

Disabled' From version 59 until version 61 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. No support 29 — 59

Disabled'

Disabled' From version 29 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera Full support 22

Notes'

Full support 22

Notes'

Notes' In Opera 32, the ability to have multiple shadow roots was deprecated. No support 15 — ?

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Safari

No support No

WebView Android Full support 37

Notes'

Full support 37

Notes'

Notes' In version 45, the ability to have multiple shadow roots was deprecated. No support ? — ?

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Chrome Android Full support 35

Notes'

Full support 35

Notes'

Notes' In Chrome 45, the ability to have multiple shadow roots was deprecated. No support 25 — ?

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Firefox Android No support 59 — 61

Disabled'

No support 59 — 61

Disabled'

Disabled' From version 59 until version 61 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. No support 29 — 59

Disabled'

Disabled' From version 29 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Opera Android Full support 22

Notes'

Full support 22

Notes'

Notes' In Opera 32, the ability to have multiple shadow roots was deprecated. No support 14 — ?

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Safari iOS

No support No

Samsung Internet Android Full support 5.0

Notes'

Full support 5.0

Notes'

Notes' In Samsung Internet 5.0, the ability to have multiple shadow roots was deprecated. No support 4.0 — ?

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.'
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.'
Deprecated. Not for use in new websites.
See implementation notes.'
See implementation notes.
User must explicitly enable this feature.'
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.'
Requires a vendor prefix or different name for use.