Node: getRootNode() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
ThegetRootNode() method of theNode interfacereturns the context object's root,which optionally includes the shadow root if it is available.
Syntax
getRootNode()getRootNode(options)Parameters
optionsOptionalAn object that sets options for getting the root node. The available options are:
composed: A boolean value that indicates whether the shadowroot should be returned (false, the default), or a root node beyondshadow root (true).
Return value
An object inheriting fromNode. This will differ in exact form dependingon where you callgetRootNode(); for example:
- Calling it on an element inside a standard web page will return an
HTMLDocumentobject representing the entire page (or<iframe>). - Calling it on an element inside a shadow DOM will return the associated
ShadowRoot. - Calling it on an element that is not attached to a document or a shadow tree will returnthe root of the DOM tree it belongs to.
Examples
Example 1
The first simple example returns a reference to the HTML/document node:
const rootNode = node.getRootNode();Example 2
This more complex example shows the difference between returning a normal root, and aroot including the shadow root:
<div> <div></div></div><div>shadowHost</div><pre>Output: </pre>const parent = document.querySelector(".parent");const child = document.querySelector(".child");const shadowHost = document.querySelector(".shadowHost");const output = document.getElementById("output");output.innerText += `\nparent's root: ${parent.getRootNode().nodeName}\n`; // #documentoutput.innerText += `child's root: ${child.getRootNode().nodeName}\n\n`; // #document// create a ShadowRootconst shadowRoot = shadowHost.attachShadow({ mode: "open" });shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style><div>shadowChild</div>';const shadowChild = shadowRoot.querySelector(".shadowChild");// The default value of composed is falseoutput.innerText += `shadowChild.getRootNode() === shadowRoot : ${ shadowChild.getRootNode() === shadowRoot}\n`; // trueoutput.innerText += `shadowChild.getRootNode({ composed:false }) === shadowRoot : ${ shadowChild.getRootNode({ composed: false }) === shadowRoot}\n`; // trueoutput.innerText += `shadowChild.getRootNode({ composed:true }).nodeName : ${ shadowChild.getRootNode({ composed: true }).nodeName}\n`; // #documentExample 3
This example returns the root of the unmounted tree.Noteelement here is the root of the tree (as it has no parent), so by definition its root is itself:
const element = document.createElement("p");const child = document.createElement("span");element.append(child);const rootNode = child.getRootNode(); // <p><span></span></p>element === rootNode; // trueelement === element.getRootNode(); // trueSpecifications
| Specification |
|---|
| DOM # ref-for-dom-node-getrootnode① |