JavaScript Element shadowRoot Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word SHADOWROOT

Definition

In JavaScript, the shadowRoot property of Element is a read-only reference to the shadow root hosted by the element (MDN). Use attachShadow() to create one.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.shadowRoot. Start with this line.

JavaScript
el.shadowRoot
CallWhat it does
el.shadowRootPrimary signature.

Built into the browser. Read or assign el.shadowRoot — no import required.

Library declarations
JavaScript
el.shadowRoot

Parameters

ParameterDescription
attachShadow()Required. Creates the ShadowRoot
mode: "closed"Optional. Hides internals from shadowRoot
Host elementRequired. Must be allowed to host a shadow tree

Return Value

Return ValueDescription
*The current value of el.shadowRoot.

JavaScript Examples

Example 1 — Open Mode Access

Attach an open shadow root, then read it from the host.

JavaScript
const host = document.getElementById("host");
host.attachShadow({ mode: "open" });

console.log(host.shadowRoot); // ShadowRoot
console.log(host.shadowRoot.mode); // "open"
Try It Yourself

How It Works

  1. Select a host that can receive a shadow tree (for example a div).
  2. Call attachShadow with mode: "open".
  3. Read host.shadowRoot. Returns the ShadowRoot.
  4. Use DOM APIs on that root (append, querySelector, …).

Example 2 — Closed Mode Is Hidden

With mode: "closed", shadowRoot stays null.

JavaScript
const host = document.getElementById("host");
const root = host.attachShadow({ mode: "closed" });

console.log(host.shadowRoot); // null
console.log(root);            // ShadowRoot (keep this!)
Try It Yourself

How It Works

  1. Attach with "closed". Encapsulation hides the tree.
  2. host.shadowRoot is null (MDN).
  3. Save attachShadow()’s return value if you need access.
  4. Use that saved root for appends and queries.

Example 3 — Update Content via shadowRoot

MDN idea: reach into an open shadow tree and change a node.

JavaScript
const host = document.getElementById("host");
host.attachShadow({ mode: "open" });

const span = document.createElement("span");
span.textContent = "Hello shadow";
host.shadowRoot.append(span);

host.shadowRoot.querySelector("span").textContent = "Updated";
console.log(host.shadowRoot.textContent); // "Updated"
Try It Yourself

How It Works

  1. Attach open so shadowRoot is usable.
  2. Append nodes into host.shadowRoot.
  3. Query later with shadowRoot.querySelector.
  4. Update text — same DOM APIs as light DOM.
Compatibility

Browser Support

Element.shadowRoot is Baseline Widely available (MDN: across browsers since January 2020). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.shadowRoot

Read-only access to an open ShadowRoot. Returns null for closed mode and some built-in UA shadow trees.

Baseline Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
shadowRoot Baseline

Bottom line: Safe for modern apps. Prefer open mode when you need host.shadowRoot; keep attachShadow()'s return value for closed roots.

Frequently Asked Questions

It returns the ShadowRoot hosted by the element when the shadow tree was attached in open mode, or null when there is no accessible shadow root (MDN).
No. MDN marks Element.shadowRoot as Baseline Widely available (since January 2020). It is not Deprecated, Experimental, or Non-standard.
When the element has no shadow root, when attachShadow used mode: "closed", or for some built-ins (for example <video>, <audio>) that use closed user-agent shadow roots (MDN).
Call element.attachShadow({ mode: "open" }) or { mode: "closed" }. For open mode, element.shadowRoot then returns the ShadowRoot.
No. It is read-only. Attach a shadow with attachShadow(); do not assign to shadowRoot.
Not through element.shadowRoot — that stays null. Keep the ShadowRoot returned by attachShadow() if you need internal access (MDN).

Next: slot

Learn the Element property that reflects the name of the slot this element is assigned to.

slot tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Element scrollWidth Property JavaScript Element slot Property