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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
shadowRoot | Chrome Full support 43 | Edge Full support 79 | Firefox
Full support
63
| 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
| 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.