Baseline Widely available
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.
The property value is set using the options.mode property of the object passed to Element.attachShadow(), or using the shadowrootmode attribute of the <template> element when a shadow root is created declaratively.
A string value that can have either of the values:
open
Elements of the shadow root are accessible from JavaScript outside the root.
closed
Nodes inside the closed shadow tree cannot be accessed by JavaScript outside of the root.
// 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.textContent("Opened shadow"); // The shadow is open, we can access it from outside
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3