ShadowRoot.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.
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
// We create a closed shadow root, that is not accessible let element = document.createElement("div"); element.attachShadow({ mode: "closed" }); element.shadowRoot // null as the shadow root is closed // We create an open shadow root, that is accessible let element2 = document.createElement("div"); element2.attachShadow({ mode: "open" }); console.log("The shadow is" + element2.shadowRoot.mode) // logs "The shadow is open" element2.shadowRoot.innerHTML(" Opened shadow ") // The shadow is open, we can access it from outside
Specifications
Specification |
---|
DOM Standard (DOM) # dom-shadowroot-mode |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
mode |
53 |
79 |
63 |
No |
40 |
10.1 |
53 |
53 |
63 |
41 |
10.3 |
6.0 |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode