The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.

You can retrieve a reference to an element's shadow root using its Element.shadowRoot property, provided it was created using Element.attachShadow() with the mode option set to open.

Properties

ShadowRoot.mode Read only
The mode of the ShadowRoot — either open or closed. This defines whether or not the shadow root's internal features are accessible from JavaScript.
ShadowRoot.host Read only
Returns a reference to the DOM element the ShadowRoot is attached to.
ShadowRoot.innerHTML
Sets or returns a reference to the DOM tree inside the ShadowRoot.

Properties included from DocumentOrShadowRoot

The ShadowRoot interface includes the following properties defined on the DocumentOrShadowRoot mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document interface.

DocumentOrShadowRoot.activeElement Read only
Returns the Element within the shadow tree that has focus.
DocumentOrShadowRoot.styleSheets Read only
Returns a StyleSheetList of CSSStyleSheet objects for stylesheets explicitly linked into, or embedded in a document.

Methods

The ShadowRoot interface includes the following methods defined on the DocumentOrShadowRoot mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document interface.

DocumentOrShadowRoot.getSelection()
Returns a Selection object representing the range of text selected by the user, or the current position of the caret.
DocumentOrShadowRoot.elementFromPoint()
Returns the topmost element at the specified coordinates.
DocumentOrShadowRoot.elementsFromPoint()
Returns an array of all elements at the specified coordinates.
DocumentOrShadowRoot.caretPositionFromPoint()
Returns a CaretPosition object containing the DOM node containing the caret, and caret's character offset within that node.

Examples

The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

connectedCallback() {
  console.log('Custom square element added to page.');
  updateStyle(this);
}

attributeChangedCallback(name, oldValue, newValue) {
  console.log('Custom square element attributes changed.');
  updateStyle(this);
}

In the updateStyle() function itself, we get a reference to the shadow DOM using Element.shadowRoot. From here we use standard DOM traversal techniques to find the <style> element inside the shadow DOM and then update the CSS found inside it:

function updateStyle(elem) {
  var shadow = elem.shadowRoot;
  var childNodes = shadow.childNodes;
  for(var i = 0; i < childNodes.length; i++) {
    if(childNodes[i].nodeName === 'STYLE') {
      childNodes[i].textContent = 'div {' +
                          ' width: ' + elem.getAttribute('l') + 'px;' +
                          ' height: ' + elem.getAttribute('l') + 'px;' +
                          ' background-color: ' + elem.getAttribute('c');
    }
  }
}

Specifications

Specification Status Comment
DOM
The definition of 'Interface ShadowRoot' in that specification.
Living Standard  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support53 No1592 3 No4010.1
mode53 No1592 3 No4010.1
host53 No1592 3 No4010.1
innerHTML53 No1592 3 No4010.1
Features included from the DocumentOrShadowRoot mixin53 No4 No2 4 No40 No4
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5353 No1592 34010.16.0
mode5353 No1592 34010.16.0
host5353 No1592 34010.16.0
innerHTML5353 No1592 34010.16.0
Features included from the DocumentOrShadowRoot mixin5353 No4 No2 440 No46.0

1. Under consideration

2. See bug 1205323

3. From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. Features still implemented on the Document interface

Document Tags and Contributors

Last updated by: ExE-Boss,