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


var root = node.getRootNode(options);


options Optional
An object that sets options for getting the root node. The available options are:
  • composed: A Boolean that indicates whether the shadow root should be returned (false, the default), or a root node beyond shadow root (true).


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

  • Calling it on an element inside a standard web page will return an HTMLDocument object representing the entire page.
  • Calling it on an element inside a shadow DOM will return the associated ShadowRoot.


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

rootNode = node.getRootNode();

This more complex example shows the difference between returning a normal root, and a root incuding the shadow root. (See the full source code):

<!-- source: -->
<div class="js-parent">
  <div class="js-child"></div>
<div class="js-shadowHost"></div>
  // works on Chrome 54+,Opera 41+

  var parent = document.querySelector('.js-parent'),
      child = document.querySelector('.js-child'),
      shadowHost = document.querySelector('.js-shadowHost');

  console.log(parent.getRootNode().nodeName); // #document
  console.log(child.getRootNode().nodeName); // #document

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

  // The default value of composed is false
  console.log(shadowChild.getRootNode() === shadowRoot); // true
  console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
  console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document


Specification Status Comment
The definition of 'getRootNode()' in that specification.
Living Standard Initial definition.

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getRootNodeChrome Full support 54Edge Full support 79Firefox Full support 53IE No support NoOpera Full support 41Safari Full support 10.1WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 53Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0


Full support
Full support
No support
No support