I volontari di MDN non hanno ancora tradotto questo articolo in Italiano. Unisciti a noi e traducilo tu stesso.
Puoi anche consultare l’articolo in English (US).

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 (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
DOM
The definition of 'shadowRoot' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 53Edge No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Full support 63
Full support 63
Full support 59
Notes Disabled
Notes See bug 1205323
Disabled From version 59: 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 NoOpera Full support 40Safari Full support YesWebView Android Full support 53Chrome Android Full support 53Edge Mobile No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Android Full support 63
Full support 63
Full support 59
Notes Disabled
Notes See bug 1205323
Disabled From version 59: 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 40Safari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: ExE-Boss, Louis-7, phenomeno, jpmedley, chrisdavidmills, DomenicDenicola, valtlai, arthurevans, markg
Ultima modifica di: ExE-Boss,