<link rel=stylesheet type=text/css href=resources/styles.css>
<style scoped>
</style>

<h3>Component Model DOM Interfaces</h3>

<pre><code>
[Supplemental]
interface Element {
    readonly attribute <a href="#shadow-root-interface">ShadowRoot</a> <a href="#shadow-root-attribute">shadowRoot</a>;
    attribute String <a href="#pseudo-attribute">pseudo</a>;
}
</code></pre>

<p>The <dfn id="shadow-root-attribute" title="shadow-root-attribute">shadowRoot</dfn> attribute returns the current <a href="#shadow-root-interface">ShadowRoot</a>, hosted by this element. It returns <code>null</code> if the element is not currently hosting a <span class=ref>shadow DOM subtree</span> or its shadow DOM subtree is not accessible.

<p>The <dfn id="pseudo-attribute" title="pseudo-attribute">pseudo</dfn> attribute allows setting a <a href="http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors">CSS pseudo-element value</a> on an element and roughly corresponds to functionality of the <a href="http://dev.w3.org/2006/xbl2/#the-pseudo-attribute">XBL2 pseudo attribute</a>.</p>

<pre><code>
interface <a href="#shadow-root-interface">ShadowRoot</a> : <a href="#tree-scope-interface">TreeScope</a> {
    attribute bool <a href="#apply-author-sheets-attribute">applyAuthorSheets</a>;
    readonly attribute Element <a href="#shadow-host-attribute">shadowHost</a>;
}
</code></pre>

<p>The <dfn id="apply-author-sheets-attribute" title="apply-author-sheets-attribute">applyAuthorSheets</dfn> attribute indicates whether or not rules in <a href="http://www.w3.org/TR/CSS2/cascade.html">author style sheets</a> associated with the element's document apply to the <span class=def>shadow DOM subtree</a>. It is an equivalent of the <a href="http://dev.w3.org/2006/xbl2/#apply-author-sheets">XBL2 apply-author-sheets attribute</a>.</p>

<p>The <dfn id="shadow-host-attribute" title="shadow-host-attribute">shadowHost</dfn> attribute refers to the element that is hosting this instance.</p>

<pre><code>
interface <a href="#tree-scope-interface">TreeScope</a> {
    readonly <a href="#tree-scope-interface">TreeScope</a> <a href="#parent-tree-scope-attribute">parentTreeScope</a>;
    Element <a href="#get-element-by-id-function">getElementById</a>(in DOMString elementId);
}
</code></pre>

<p>The <dfn id="parent-tree-scope-attribute" title="parent-tree-scope-attribute">parentTreeScope</dfn> attribute returns the <span def=tree-scope>tree scope</a> that contains this tree scope.</p>

<p>The <dfn id="get-element-by-id-function" title="get-element-by-id-function">getElementById</dfn> returns first element, in tree order, within the tree scope's tree, whose ID is elementId. It is essentially <a href="http://www.w3.org/TR/domcore/#dom-document-getelementbyid">document.getElementById</a> from <a href="http://www.w3.org/TR/domcore/">DOM Core</a>, but scoped inside of the <span class=def>tree scope</span>.</p>

<pre><code>
[Supplemental]
interface Document : TreeScope {
     void register(in String tagName, in Function elementConstructor);
}
</code></pre>
<p>Registers a new type of DOM element. The new element becomes constructable using document.createElement method.</p>
<p>Lifecycle:</p>
<ol>
    <li>element registered using register()
    <li>a new JS object is created from elementConstructor;
    <li>a new HTMLDivElement object is created;
    <li>the prototype chain is fixed up as follows:<br>
        [object] -> [ HTMLDivElement ] -> [elementConstructor.prototype]
    <li>the method "createShadowSubtree" is called on the newly created object.
</ol>

<pre><code>
[Duck]
interface Component {
    void createShadowSubtree(in ShadowRoot shadowRoot);
}
</code></pre>