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