Web/API/ShadowRoot

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.delegatesFocus Read only ': Returns a boolean that indicates whether delegatesFocus was set when the shadow was attached (see Element.attachShadow()).
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.
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.

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 ([[../../../../../../mdn.github.io/web-components-examples/life-cycle-callbacks/index|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
DOMThe definition of 'Interface ShadowRoot' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ShadowRoot` Experimental'	Chrome Full support 57	Edge Full support 79	Firefox Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 40	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 41	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
`delegatesFocus` Experimental'	Chrome Full support 57	Edge Full support 79	Firefox ?	IE No support No	Opera ?	Safari No support No	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android ?	Opera Android ?	Safari iOS No support No	Samsung Internet Android Full support 7.0
Features included from the `DocumentOrShadowRoot` mixin Experimental'	Chrome Full support 57	Edge Full support 79	Firefox Full support 63	IE No support No	Opera Full support 40	Safari No support No Notes' No support No Notes' Notes' Features still implemented on the Document interface	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 63	Opera Android Full support 41	Safari iOS No support No Notes' No support No Notes' Notes' Features still implemented on the Document interface	Samsung Internet Android Full support 6.0
`host` Experimental'	Chrome Full support 57	Edge Full support 79	Firefox Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 40	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 41	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
`innerHTML` Experimental'Non-standard'	Chrome Full support 57	Edge Full support 79	Firefox Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 40	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 41	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
`mode` Experimental'	Chrome Full support 57	Edge Full support 79	Firefox Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 40	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 63 Full support 63 No support 59 — 63 Disabled' Disabled' From version 59 until version 63 (exclusive): this feature is behind the `dom.webcomponents.shadowdom.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 41	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.

ShadowRoot by Mozilla Contributors is licensed under CC-BY-SA 2.5.