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
.
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 (seeElement.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
, eitheropen
orclosed
. 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
ornamed
. ShadowRoot.styleSheets
Read only-
Returns a
StyleSheetList
ofCSSStyleSheet
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