ShadowRoot.mode

The mode 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.

When the mode of a shadow root is "closed", the shadow root’s implementation internals are inaccessible and unchangeable from JavaScript—in the same way the implementation internals of, for example, the <video> element are inaccessible and unchangeable from JavaScript.

Syntax

var mode = shadowRoot.mode

Value

A value defined in the ShadowRootMode enum — either open or closed.

Examples

let customElem = document.querySelector('my-shadow-dom-element');
let shadow = customElem.shadowRoot;

// Another way to check whether the shadow root is open; it will return null if not
if(shadow) {
  // If it is open, close it to stop people stealing our secrets!
  shadow.mode = 'closed';
}

Specifications

Specification Status Comment
DOM
The definition of 'ShadowRoot.mode' in that specification.
Living Standard  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support53 No1

63

592 3

No4010.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5353 No1

63

592 3

4010.16.0

1. Under consideration

2. See bug 1205323

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

Document Tags and Contributors

Contributors to this page: ExE-Boss, chrisdavidmills, Sebastianz, sideshowbarker, fscholz
Last updated by: ExE-Boss,