La propiedad de solo lectura 'Element.shadowRoot' representa el shadow root alojado por el elemento. Use Element.attachShadow() para agregar un shadow root a un elemento existente.


var shadowroot = element.shadowRoot;


A ShadowRoot (en-US) object instance, or null if the associated shadow root was attached with its mode (en-US) 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) {
  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')};


Specification Status Comment
La definición de 'shadowRoot' en esta especificación.
Living Standard

Browser compatibility

BCD tables only load in the browser

See also