JavaScript Node getRootNode() Method

What You’ll Learn

The Node.getRootNode() method returns the root of the tree that contains a node. Learn Document vs ShadowRoot results, the composed option, and what happens for detached nodes.

Introduction

Every node lives in some tree. getRootNode() answers: “What is the top of my tree right now?” On a normal page that is usually the document. Inside shadow DOM it is usually the shadow root—unless you ask to look past it.

The optional { composed: true } flag is the key for shadow DOM: it returns a root beyond the shadow boundary (often still the page document).

Understanding getRootNode()

MDN: returns the context object’s root, optionally including the shadow root depending on options.

• In a document — typically an HTMLDocument (#document).
• In shadow DOM — the associated ShadowRoot when composed is false.
• composed: true — a root beyond the shadow root (often the document).
• Detached tree — the top node of that fragment (may be the element itself).

📝 Syntax

const root = node.getRootNode();
const beyondShadow = node.getRootNode({ composed: true });

Parameters

• options (optional) — Object with:
  • composed — false (default) may return the shadow root; true looks beyond the shadow root.

Return value

An object inheriting from Node—commonly a Document, ShadowRoot, or the top Element of a detached tree.

🎨 The composed Option

For light-DOM nodes with no shadow involved, composed usually does not change the result: you still get the document.

Examples Gallery

Examples follow MDN Node.getRootNode() patterns. Use View Output or Try It Yourself for each case.

const child = document.querySelector(".child");
const root = child.getRootNode();

console.log(root.nodeName);      // "#document"
console.log(root === document);  // true

#document
true

const element = document.createElement("p");
const child = document.createElement("span");
element.append(child);

const rootNode = child.getRootNode();
console.log(element === rootNode);              // true
console.log(element === element.getRootNode()); // true

true
true

const host = document.querySelector(".shadowHost");
const shadowRoot = host.attachShadow({ mode: "open" });
shadowRoot.innerHTML = '<div class="shadowChild">shadowChild</div>';
const shadowChild = shadowRoot.querySelector(".shadowChild");

console.log(shadowChild.getRootNode() === shadowRoot); // true

true

// assuming shadowChild from a shadow tree (see Example 3)
console.log(
  shadowChild.getRootNode({ composed: false }) === shadowRoot
); // true

console.log(
  shadowChild.getRootNode({ composed: true }).nodeName
); // "#document"

true
#document

const orphan = document.createElement("div");
console.log(orphan === orphan.getRootNode()); // true

const inPage = document.body;
console.log(inPage === inPage.getRootNode()); // false (root is document)

true
false

🚀 Common Use Cases

• Detect whether a node lives in the main document or a shadow tree.
• Resolve the correct root for queries scoped to a shadow root.
• Use composed: true when you need the page document from inside shadow DOM.
• Inspect detached fragments before they are appended.
• Feature-detect tree context in web components and design systems.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since January 2020).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Default composed is false.
• Related: hasChildNodes(), contains(), ownerDocument, parentNode, JavaScript hub.

💡 Best Practices