Component Model DOM Interfaces

interface Element {
    readonly attribute ShadowRoot shadowRoot;
    attribute String pseudo;

The shadowRoot attribute returns the current ShadowRoot, hosted by this element. It returns null if the element is not currently hosting a shadow DOM subtree or its shadow DOM subtree is not accessible.

The pseudo attribute allows setting a CSS pseudo-element value on an element and roughly corresponds to functionality of the XBL2 pseudo attribute.

interface ShadowRoot : TreeScope {
    attribute bool applyAuthorSheets;
    readonly attribute Element shadowHost;

The applyAuthorSheets attribute indicates whether or not rules in author style sheets associated with the element's document apply to the shadow DOM subtree. It is an equivalent of the XBL2 apply-author-sheets attribute.

The shadowHost attribute refers to the element that is hosting this instance.

interface TreeScope {
    readonly TreeScope parentTreeScope;
    Element getElementById(in DOMString elementId);

The parentTreeScope attribute returns the tree scope that contains this tree scope.

The getElementById returns first element, in tree order, within the tree scope's tree, whose ID is elementId. It is essentially document.getElementById from DOM Core, but scoped inside of the tree scope.

interface Document : TreeScope {
     void register(in String tagName, in Function elementConstructor);

Registers a new type of DOM element. The new element becomes constructable using document.createElement method.


  1. element registered using register()
  2. a new JS object is created from elementConstructor;
  3. a new HTMLDivElement object is created;
  4. the prototype chain is fixed up as follows:
    [object] -> [ HTMLDivElement ] -> [elementConstructor.prototype]
  5. the method "createShadowSubtree" is called on the newly created object.

interface Component {
    void createShadowSubtree(in ShadowRoot shadowRoot);