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

The component model enables creation of new types of elements by extending existing DOM elements. For example, here's how you would create a new sub-type of HTMLElement:

function MyDOMObject() {
    HTMLElement.call(this);
}

MyDOMOjbect.prototype = Object.create(HTMLElement.prototype);

// ...

// 1) Will not be able to add instances of MyDOMObject to document without this call.
// 2) First parameter must be a string prefixed with "x-".
Element.register("x-my-dom-object", MyDOMObject);

// ...

var myDOMObject = new MyDOMObject();

The resulting myDOMObject instance is a Javascript object that is a valid DOM element, which can be added to the DOM tree.

Implementation details:

• Make calling constructors of DOM elements possible.
• Implement Element.register.

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]