Node: getRootNode() method

The getRootNode() method of the Node interface returns the context object's root, which optionally includes the shadow root if it is available.

Syntax

js
getRootNode()
getRootNode(options)

Parameters

options Optional

An object that sets options for getting the root node. The available options are:

Return value

An object inheriting from Node. This will differ in exact form depending on where you call getRootNode(); for example:

Examples

undefined

Example 1

The first simple example returns a reference to the HTML/document node:

js
const rootNode = node.getRootNode();

Example 2

This more complex example shows the difference between returning a normal root, and a root including the shadow root:

html
<div class="parent">
  <div class="child"></div>
</div>
<div class="shadowHost">shadowHost</div>
<pre id="output">Output: </pre>
js
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`; // #document
output.innerText += `child's  root: ${child.getRootNode().nodeName}\n\n`; // #document

// create a ShadowRoot
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
shadowRoot.innerHTML =
  '<style>div{background:#2bb8aa;}</style><div class="shadowChild">shadowChild</div>';
const shadowChild = shadowRoot.querySelector(".shadowChild");

// The default value of composed is false
output.innerText += `shadowChild.getRootNode() === shadowRoot : ${
  shadowChild.getRootNode() === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:false }) === shadowRoot : ${
  shadowChild.getRootNode({ composed: false }) === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:true }).nodeName : ${
  shadowChild.getRootNode({ composed: true }).nodeName
}\n`; // #document

Example 3

This example returns the root of the unmounted tree. Note element here is the root of the tree (as it has no parent), so by definition its root is itself:

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

element.append(child);

const rootNode = child.getRootNode(); // <p><span></span></p>

element === rootNode; // true
element === element.getRootNode(); // true

Specifications