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.

Properties

ShadowRoot.activeElement Read only: Returns the Element within the shadow tree that has focus.
ShadowRoot.delegatesFocus Read only Non-Standard Deprecated: 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 Non-Standard: 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.styleSheets Read only: Returns a StyleSheetList of CSSStyleSheet objects for stylesheets explicitly linked into, or embedded in a shadow tree.

Event handlers

ShadowRoot.onslotchange: An event handler representing the code to be called when the slotchange event is raised.

Methods

ShadowRoot.getAnimations(): Returns an array of all Animation objects currently in effect, whose target elements are descendants of the shadow tree.
ShadowRoot.getSelection(): Returns a Selection object representing the range of text selected by the user, or the current position of the caret.
ShadowRoot.elementFromPoint(): Returns the topmost element at the specified coordinates.
ShadowRoot.elementsFromPoint(): Returns an array of all elements at the specified coordinates.

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) {
  var shadow = elem.shadowRoot;
  var childNodes = shadow.childNodes;
  for(var i = 0; i < childNodes.length; i++) {
    if(childNodes[i].nodeName === 'STYLE') {
      childNodes[i].textContent =
        'div {' +
          'width: ' + elem.getAttribute('l') + 'px;' +
          'height: ' + elem.getAttribute('l') + 'px;' +
          'background-color: ' + elem.getAttribute('c') + ';' +
        '}';
    }
  }
}

Specifications

Specification
DOM Standard # interface-shadowroot

Browser compatibility

BCD tables only load in the browser