ShadowRoot
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
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

ShadowRootInstance 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.clonable` Read only 

Returns a boolean that indicates whether the shadow root is clonable, which can be set via the `Element.attachShadow()` `clonable` option.

`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
--------------

| Specification |
| --- |
| DOM Standard # interface-shadowroot |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.