ShadowRoot：mode 属性

基线 广泛可用

此功能已稳定，可在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中都可用 2020 年 1 月.

mode 是 ShadowRoot 的只读属性，用于指定其模式 - open 或 closed。这定义了 shadow root 的内部功能是否可以通过 JavaScript 访问。

当 shadow root 的 mode 为“closed”时，shadow root 的实现内部细节将无法从 JavaScript 访问或更改 - 就像例如 <video> 元素的实现内部细节无法从 JavaScript 访问或更改一样。

属性值是使用传递给 Element.attachShadow() 的对象的 options.mode 属性设置的，或者在声明式创建 shadow root 时使用 shadowrootmode 属性设置的。

值

可以具有以下值之一的字符串值

open

shadow root 的元素可以从 shadow root 外部的 JavaScript 访问。

closed

封闭的 shadow tree 内部的节点无法从 root 外部的 JavaScript 访问。

示例

js
// 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

规范

规范
DOM 标准
# dom-shadowroot-mode

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。