Shadow DOM Interfaces

An shadow root is represented by the ShadowRoot object:

[Constructor(in HTMLElement element) raises(DOMException)]
interface ShadowRoot : TreeScope {
    attribute bool applyAuthorSheets;
    readonly attribute Element shadowHost;
}

The element parameter in ShadowRoot constructor is an Element that will be hosting this instance. If the element is already hosting a shadow DOM subtree, a NO_MODIFICATION_ALLOWED_ERR DOM Exception is raised.

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 back to the element that is hosting this shadow root.

A ShadowRoot is a TreeScope, which represents a DOM tree scope.

interface TreeScope : Node {
    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.

The component model extends the Element as follows:

[Supplemental]
interface Element {
    attribute String pseudo;
}

The pseudo attribute allows setting a CSS pseudo-element value on an element and roughly corresponds to functionality of the XBL2 pseudo attribute. The value must either be null or a string that matches the IDENT production of the CSS grammar, with the exception that the names defined by CSS for pseudo class selectors and pseudo element selectors are not valid, for example: active, after, before, checked, disabled, empty, enabled, first-child, first-letter, first-line, first-of-type, focus, hover, indeterminate, lang, last-child, last-of-type, link, not, nth-child, nth-last-child, nth-last-of-type, nth-of-type, only-child, only-of-type, root, target, visited.