ShadowRoot: mode property

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Themode read-only property of theShadowRoot specifies its mode — eitheropen orclosed.This defines whether or not the shadow root's internal features are accessible from JavaScript.

When themode 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 themode property of the object passed toElement.attachShadow(), or using theshadowrootmode attribute of the<template> element when a shadow root is created declaratively.

Value

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.

Examples

// We create a closed shadow root, that is not accessiblelet 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 accessiblelet 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