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).


A Node interface.


The first simple example will return a reference to the HTML/document node when run in supporting browsers:

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>
    // work on Chrome 54+,Opera41+

    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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 54.0 53 (53) ? 41 10.1
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 54.0 53.0 (53) ? 41 10.1 54.0

Document Tags and Contributors

 Contributors to this page: Krinkle, chrisdavidmills, bede, mkutny, jszhou, jpmedley
 Last updated by: Krinkle,