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- 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
— 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.
Properties included from DocumentOrShadowRoot
The ShadowRoot
interface includes the following properties defined on the DocumentOrShadowRoot
mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document
interface.
DocumentOrShadowRoot.styleSheets
Read only- Returns a
StyleSheetList
ofCSSStyleSheet
objects for stylesheets explicitly linked into, or embedded in a document.
Methods
The ShadowRoot
interface includes the following methods defined on the DocumentOrShadowRoot
mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the Document
interface.
DocumentOrShadowRoot.getSelection()
- Returns a
Selection
object representing the range of text selected by the user, or the current position of the caret. DocumentOrShadowRoot.elementFromPoint()
- Returns the topmost element at the specified coordinates.
DocumentOrShadowRoot.elementsFromPoint()
- Returns an array of all elements at the specified coordinates.
DocumentOrShadowRoot.caretPositionFromPoint()
- Returns a
CaretPosition
object containing the DOM node containing the caret, and caret's character offset within that node.
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 | Status | Comment |
---|---|---|
DOM The definition of 'Interface ShadowRoot' in that specification. |
Living Standard |
Browser compatibility
BCD tables only load in the browser