This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

ShadowRoot

Summary

The ShadowRoot object is the point of entry to a shadow tree, which provides functional encapsulation of DOM objects within an established document.

Properties

activeElement
Represents the currently focused element in the shadow tree.
applyAuthorStyles
Indicates whether the rules in author styles associated with the element’s document apply to the shadow tree. If false (default value), the author styles are not applied to the shadow tree. If true, the author styles are applied.
innerHTML
Represents the markup of the ShadowRoot’s contents.
resetStyleInheritance
Indicates whether or not the inheritable CSS properties are set to the initial value at the shadow boundary. If false (default value), the properties continue to inherit. If true, the properties are set to initial value.
styleSheets
Represents the shadow root style sheets.

Methods

addStyleSheet
Adds a new style sheet to shadow root style sheets.
elementFromPoint
Returns an element at specified coordinates.
getElementById
Just like Document.getElementById except that it only works within the scope of this ShadowRoot’s shadow tree.
getElementsByClassName
Just like Document/getElementsByClassName except that it only works within the scope of this ShadowRoot’s shadow tree.
getElementsByTagName
Just like Document/getElementsByTagName except that it only works within the scope of this ShadowRoot’s shadow tree.
getElementsByTagNameNS
Just like document.getElementsByTagNameNS except that it only works within the scope of this ShadowRoot’s shadow tree.
getSelection
Returns the current selection in this ShadowRoot’s shadow tree.
removeStyleSheet
Removes a style sheet from the ShadowRoot.

Events

No events.

Related specifications

Shadow DOM
Editor’s Draft

See also

Related articles

Web Components