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.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.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
.
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.activeElement
Read only- Returns the
Element
within the shadow tree that has focus. 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
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 53 | Edge
No support
No
| Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10.1 | WebView Android Full support 53 | Chrome Android Full support 53 | Edge Mobile
No support
No
| Firefox Android
Full support
63
| Opera Android Full support 40 | Safari iOS Full support 10.1 | Samsung Internet Android Full support 6.0 |
delegatesFocus | Chrome Full support 45 | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Features included from the DocumentOrShadowRoot mixin | Chrome Full support 53 | Edge
No support
No
| Firefox Full support 63 | IE No support No | Opera Full support 40 | Safari
No support
No
| WebView Android Full support 53 | Chrome Android Full support 53 | Edge Mobile
No support
No
| Firefox Android Full support 63 | Opera Android Full support 40 | Safari iOS
No support
No
| Samsung Internet Android Full support 6.0 |
host | Chrome Full support 53 | Edge
No support
No
| Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10.1 | WebView Android Full support 53 | Chrome Android Full support 53 | Edge Mobile
No support
No
| Firefox Android
Full support
63
| Opera Android Full support 40 | Safari iOS Full support 10.1 | Samsung Internet Android Full support 6.0 |
innerHTML | Chrome Full support 53 | Edge
No support
No
| Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10.1 | WebView Android Full support 53 | Chrome Android Full support 53 | Edge Mobile
No support
No
| Firefox Android
Full support
63
| Opera Android Full support 40 | Safari iOS Full support 10.1 | Samsung Internet Android Full support 6.0 |
mode | Chrome Full support 53 | Edge
No support
No
| Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10.1 | WebView Android Full support 53 | Chrome Android Full support 53 | Edge Mobile
No support
No
| Firefox Android
Full support
63
| Opera Android Full support 40 | Safari iOS Full support 10.1 | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.