We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

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.


var shadowroot = element.shadowRoot; 


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


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

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

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');


Specification Status Comment
The definition of 'shadowRoot' in that specification.
Living Standard  

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 53.0 No support No support ? No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 53.0 No support ? ? ? 53.0

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, DomenicDenicola, valtlai, arthurevans, jpmedley, markg
 Last updated by: chrisdavidmills,