getRootNode()?Node.getRootNode() returns the root of the tree that contains the node — usually the Document, or a ShadowRoot when the node lives in shadow DOM (MDN). An optional composed flag can cross the shadow boundary.
Baseline · Widely available: not Deprecated, Experimental, or Non-standard (since about January 2020).
node.getRootNode()
node.getRootNode({ composed: true })
in a normal page → #document (HTMLDocument)
inside shadow DOM → ShadowRoot (default)
composed: true → root beyond the shadow (often #document)
detached tree → top node of that tree (may be itself)| Use | Prefer |
|---|---|
| Page / light DOM root | node.getRootNode() |
| Stay inside shadow | default (composed: false) |
| Cross shadow boundary | getRootNode({ composed: true }) |
getRootNode()Call it on any node; pass { composed: true } only when you need to escape a shadow tree.
node.getRootNode() with no options for the default root.root.nodeName or compare with document / a ShadowRoot.ShadowRoot.{ composed: true } to climb past the shadow root (often to the document).| Piece | Required? | Role |
|---|---|---|
Receiver node | Yes | Any Node in a tree |
options.composed | No (default false) | Cross shadow boundary when true |
| Return value | — | A Node (Document, ShadowRoot, …) |
function getRootNode(node, composed = false):
walk toward parents / hosts
if hit ShadowRoot and composed is false:
return that ShadowRoot
if composed is true:
keep walking past the shadow host
return the outermost root
(#document, ShadowRoot, or detached top node)Keep these facts handy when resolving document vs shadow roots.
| Topic | Detail |
|---|---|
| Syntax | node.getRootNode() · node.getRootNode(options) |
| Default | composed: false |
| Page element | Usually #document |
| Shadow child | Default → ShadowRoot |
composed: true | Root beyond shadow (often document) |
| Detached top | Element with no parent is its own root |
vs ownerDocument | Creator document ≠ always current tree root |
| Status (MDN) | Baseline Widely available |
Compare document roots, detached trees, and shadow composed true/false (MDN-style demo).
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
An element in the page usually roots at the document (MDN).
const child = document.querySelector(".child");
const root = child.getRootNode();
console.log(root.nodeName); // #document
console.log(root === document); // truecomposed is false.nodeName. Documents report #document.document. Confirms the page root.Unmounted trees root at their top node (MDN Example 3).
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()); // truep parents span, not in the page yet.p. No document above it.ownerDocument. Creator document ≠ this tree root.Inside shadow DOM, default getRootNode() returns the ShadowRoot.
const host = document.querySelector(".shadowHost");
const shadowRoot = host.attachShadow({ mode: "open" });
shadowRoot.innerHTML = 'shadowChild';
const shadowChild = shadowRoot.querySelector(".shadowChild");
console.log(shadowChild.getRootNode() === shadowRoot); // trueshadowChild lives there.composed is false.attachShadow returned.composed: trueCross the shadow boundary to reach the document (MDN).
const host = document.querySelector(".shadowHost");
const shadowRoot = host.attachShadow({ mode: "open" });
shadowRoot.innerHTML = 'shadowChild';
const shadowChild = shadowRoot.querySelector(".shadowChild");
console.log(
shadowChild.getRootNode({ composed: true }).nodeName
); // #document{ composed: true }. Opt into crossing the boundary.ownerDocumentCreator document and current tree root are different ideas.
const p = document.createElement("p");
const span = document.createElement("span");
p.append(span);
console.log(span.ownerDocument === document); // true
console.log(span.getRootNode() === p); // true
console.log(span.getRootNode() === document); // falseownerDocument. Document that created the node.getRootNode(). Top of the tree the node is in now.p, not document.Check these before assuming every root is document.
Forgetting composed: true is the usual surprise when you expected the document.
An unmounted top element is its own root until you append it into the page.
ownerDocumentCreation document vs current tree root — use the API that matches your question.
You still get a ShadowRoot from inside; outside scripts may not hold a reference when mode is closed.
Node.getRootNode() is Baseline Widely available (MDN, since about January 2020). Safe for modern shadow-aware DOM code.
Supported in modern Chrome, Firefox, Safari, Edge, and Opera. Includes the composed option for shadow trees.
Bottom line: Use freely in modern apps. Prefer composed: true only when you intentionally need the outer root.
| Approach | Cost | Best for |
|---|---|---|
getRootNode() once | Cheap | Event / setup checks |
| Manual parent walk | More code | Rarely better |
| Call every frame | Wasteful | Avoid — cache when the tree is stable |
Resolve the root when the tree changes (attach, move, open shadow) — not in a tight animation loop.
composed: true: climb past the shadow root.One line: getRootNode() finds where a node’s tree starts — document, shadow root, or a detached top.
Learn how node.hasChildNodes() reports whether a node has children.
10 people found this page helpful