ShadowRoot: mode property
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.
Value
A value defined in the ShadowRootMode
enum — either open
or closed
.
Examples
let element = document.createElement("div");
element.attachShadow({ mode: "closed" });
element.shadowRoot;
let element2 = document.createElement("div");
element2.attachShadow({ mode: "open" });
console.log(`The shadow is ${element2.shadowRoot.mode}`);
element2.shadowRoot.textContent("Opened shadow");
Specifications
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 |