W3cubDocs

/Web APIs

ShadowRoot

The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.

You can retrieve a reference to an element's shadow root using its Element.shadowRoot property, provided it was created using Element.attachShadow() with the mode option set to open.

EventTarget Node DocumentFragment ShadowRoot

Instance properties

ShadowRoot.activeElement Read only

Returns the Element within the shadow tree that has focus.

ShadowRoot.adoptedStyleSheets

Add an array of constructed stylesheets to be used by the shadow DOM subtree. These may be shared with other DOM subtrees that share the same parent Document node, and the document itself.

ShadowRoot.delegatesFocus Read only

Returns a boolean that indicates whether delegatesFocus was set when the shadow was attached (see Element.attachShadow()).

ShadowRoot.fullscreenElement Read only

The element that's currently in full screen mode for this shadow tree.

ShadowRoot.host Read only

Returns a reference to the DOM element the ShadowRoot is attached to.

ShadowRoot.innerHTML

Sets or returns a reference to the DOM tree inside the ShadowRoot.

ShadowRoot.mode Read only

The mode of the ShadowRoot, either open or closed. This defines whether or not the shadow root's internal features are accessible from JavaScript.

ShadowRoot.pictureInPictureElement Read only

Returns the Element within the shadow tree that is currently being presented in picture-in-picture mode.

ShadowRoot.pointerLockElement Read only

Returns the Element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another tree.

ShadowRoot.slotAssignment Read only

Returns a string containing the type of slot assignment, either manual or named.

ShadowRoot.styleSheets Read only

Returns a StyleSheetList of CSSStyleSheet objects for stylesheets explicitly linked into, or embedded in a shadow tree.

Instance methods

ShadowRoot.getAnimations()

Returns an array of all Animation objects currently in effect, whose target elements are descendants of the shadow tree.

ShadowRoot.getSelection() Non-standard

Returns a Selection object representing the range of text selected by the user, or the current position of the caret.

ShadowRoot.elementFromPoint() Non-standard

Returns the topmost element at the specified coordinates.

ShadowRoot.elementsFromPoint() Non-standard

Returns an array of all elements at the specified coordinates.

Events

The following events are available to ShadowRoot via event bubbling from HTMLSlotElement:

HTMLSlotElement slotchange event

An event fired when the node(s) contained in that slot change.

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.

js

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:

js

function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = shadow.childNodes;
  for (const node of childNodes) {
    if (node.nodeName === "STYLE") {
      node.textContent = `
div {
  width: ${elem.getAttribute("l")}px;
  height: ${elem.getAttribute("l")}px;
  background-color: ${elem.getAttribute("c")};
}
      `;
    }
  }
}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
ShadowRoot 53 79 63 No 40 10 53 53 63 41 10 6.0
activeElement 53 79 63 No 40 10 53 53 63 41 10 6.0
adoptedStyleSheets 73 79 101 No 60 16.4 73 73 101 50 16.4 11.0
delegatesFocus 53 79 94 No 40 15 53 53 94 41 15 6.0
elementFromPoint
53Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
79 63 No
40Before Opera 53, this method returned null when the element was a child of a host node. See issue 759947.
10.1
53Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
53Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
63
41Before Opera Android 47, this method returned null when the element was a child of a host node. See issue 759947.
10.3
6.0Before Samsung Internet 9.0, this method returned null when the element was a child of a host node. See issue 759947.
elementsFromPoint
53Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
79 63 No 40 11.1
53Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
53Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
63 41 11.3
6.0Before Samsung Internet 9.0, this method returned null when the element was a child of a host node. See issue 759947.
fullscreenElement 71 79 6463 No 58 16.4 71 71 6463 50 16.4 10.0
getAnimations 84 84 75 No 70 14 84 84 79 60 14 14.0
getSelection 53 79 No No 40 No 53 53 No 41 No 6.0
host 53 79 63 No 40 10 53 53 63 41 10 6.0
innerHTML 53 79 63 No 40 10 53 53 63 41 10 6.0
mode 53 79 63 No 40 10.1 53 53 63 41 10.3 6.0
pictureInPictureElement 69 79 No No 56 13.1 105 105 No 72 13.4 20.0
pointerLockElement 53 79 63 No 40 10.1 53 53 63 41 No 6.0
slotAssignment 86 86 92 No 72 16.4 86 86 92 61 16.4 14.0
styleSheets 53 79 63 No 40 12.1 53 53 63 41 12.2 6.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot