Web/API/Element/shadowRoot

The Element.shadowRoot read-only property represents the shadow root hosted by the element. Use Element.attachShadow() to add a shadow root to an existing element.

Syntax

var shadowroot = element.shadowRoot;

Value

A ShadowRoot object instance, or null if the associated shadow root was attached with its mode set to closed. (See Element.attachShadow() for further details).

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) {
  const shadow = elem.shadowRoot;
  const childNodes = Array.from(shadow.childNodes);

  childNodes.forEach(childNode => {
    if (childNode.nodeName === 'STYLE') {
      childNode.textContent = `
        div {
          width: ${elem.getAttribute('l')}px;
          height: ${elem.getAttribute('l')}px;
          background-color: ${elem.getAttribute('c')};
        }
      `;
    }
  });
}

Specifications

Specification	Status	Comment
DOMThe definition of '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`	Chrome Full support 43	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	WebView Android Full support 43	Chrome Android Full support 43	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 Yes	Samsung Internet Android Full support 4.0

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.