Component Model

Here's a good starting point for learning about the component model spec, which is currently under development (also see periodically updating gh-pages).

Introduction

TODO Populate with beautifully crafted words.

• Component Model Use Cases
• Behavior Attachment

Overview

Isolation

Brainstorming page

Extensibility

New element types are created by extending DOM elements. Each descendant can create its own shadow DOM subtree. If the descendant chooses to do so, the parent shadow DOM subtree becomes inaccessible and invisible. It's still there (to ensure that the code written to exercise it doesn't freak out), but it isn't rendered -- it's a ghost tree. A child may return this tree back to life by using <inherited> element anywhere in its shadow DOM subtree. The <inherited> is replaced with the parent shadow DOM subtree when rendering.

The essential mechanics of this behavior are probably as follows:

• when initializing element, walk up to the prototype chain until top
• walking down, for each member of the prototype chain, create shadow DOM subtree
• render only the tree at the bottom of the chain.

Every instance also gets an opportunity to create its own shadow DOM subtree by using the shadow property. If the property is set, the newly blessed shadow DOM subtree behaves as if it was stuck at the bottom of the prototype chain, turning its prototype shadow DOM subtree into a ghost.

Desugaring

From component model's perspective, all native form controls or elements with non-trivial behavior are also sub-classes of more primitive DOM elements with shadow DOM subtrees and behaviors attached. Thus, you can extend them and override shadow DOM subtrees just like you would with any component.

For example, in Rendering Form Controls with SVG use case, this allows the engineer to override appearance of a form element completely or to reuse it and supplement it with extra bits of appearance.

Styles

<style scoped> is a natural way to limit style sheets to only affect the shadow tree of a component. The component model follows the implementation suggested in this www-style thread. That is, a selector is only matched up to, and including, the scoping element - i.e., the parent element of <style scoped> - but not further. The exceptions are:

• the selector contains the :root pseudo-class (note that this will fail if not used within the first selector sequence), or
• the selector contains the :scope pseudo-class

CSS4: care must be taken that the subject of a selector is the scoping element or a descendant thereof.

[TODO: notes on crossing the boundary from/into the shadow tree]