JavaScript Element shadowRoot Property

What You’ll Learn

Element.shadowRoot is a read-only instance property that returns the open ShadowRoot hosted by an element, or null when no accessible shadow tree exists. Learn open vs closed mode, how it pairs with attachShadow(), and how to query inside a shadow tree—with five examples and try-it labs.

Introduction

Shadow DOM lets an element host a private DOM tree. That tree is rooted at a ShadowRoot. After you attach an open shadow root with attachShadow(), you can reach it later with element.shadowRoot.

If the shadow root was attached as closed, shadowRoot stays null. That is the main beginner rule for this property.

const host = document.createElement("div");
host.attachShadow({ mode: "open" });
console.log(host.shadowRoot); // ShadowRoot

Understanding the Property

MDN: the read-only shadowRoot property represents the shadow root hosted by the element. Use Element.attachShadow() to add a shadow root to an existing element.

• Read-only — create shadow trees with attachShadow(), not assignment.
• ShadowRoot or null — null means no accessible shadow root.
• Open mode only — closed roots do not appear on this property.
• Built-ins may be closed — some browser controls keep shadowRoot null.

📝 Syntax

element.shadowRoot

Value

A ShadowRoot object instance, or null if there is no open shadow root.

📋 Open vs Closed Pattern

MDN’s core idea: open roots are readable through shadowRoot; closed roots are not.

const openHost = document.createElement("div");
openHost.attachShadow({ mode: "open" });
console.log(openHost.shadowRoot); // ShadowRoot

const closedHost = document.createElement("div");
closedHost.attachShadow({ mode: "closed" });
console.log(closedHost.shadowRoot); // null

Related learning: attachShadow(), ShadowRoot.mode, and part for styling shadow internals.

Examples Gallery

Examples follow MDN Element: shadowRoot and show how open and closed modes affect the property.

const host = document.createElement("div");
console.log(host.shadowRoot); // null

null

const host = document.createElement("div");
host.attachShadow({ mode: "open" });
console.log(host.shadowRoot.mode); // "open"

open

const host = document.createElement("div");
const root = host.attachShadow({ mode: "closed" });
console.log(host.shadowRoot); // null
console.log(root.mode);       // "closed"

null
closed

const host = document.createElement("div");
host.attachShadow({ mode: "open" });
host.shadowRoot.innerHTML = "Hello";
console.log(host.shadowRoot.querySelector(".label").textContent);

Hello

console.log({
  supported: "shadowRoot" in Element.prototype,
  returns: "ShadowRoot or null",
  tip: "Closed mode makes shadowRoot null",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "ShadowRoot or null",
  "tip": "Closed mode makes shadowRoot null",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Reading markup inside a custom element’s open shadow tree.
• Updating shadow content after attachShadow({ mode: "open" }).
• Checking whether a host currently exposes an accessible shadow root.
• Debugging web components from outside the component class.
• Pairing with part and ::part() for external styling of shadow pieces.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Returns null for closed shadow roots and for some built-in closed UA shadow trees.
• Do not assign to element.shadowRoot; use attachShadow().
• Related: attachShadow(), slot, part, JavaScript hub.

💡 Best Practices