Component Model Constraints

Shadow DOM

A component model should allow a component to hide its implementation details from the consumer. For instance, consider this bit of code:

<input type="range">

The last thing the user of this element would expect is being able to walk down the DOM subtree of the input element and find the thumb element inside:

<input type="range">
    <div></div>
</input>

Similarly, that's not what the code managing the range slider would want to happen. Thus, the shadow DOM is a way to implement a DOM subtree that is rendered as part of the document, but is not accessible by traversing the document tree. Shadow DOM provides the necessary level of isolation between component and non-component parts of the DOM tree and is the fundamental part of the component model.

Dynamic Binding Mechanism

Being able to apply and unapply a shadow DOM tree, its style information and the code that manages them as one atomic action seems important. For instance, changing the type attribute of the input element immediately triggers the change of how the element looks and behaves. One can view this described in CSS as:

input[type='text'] {
    binding: url(http://example.com/input/text/);
}

input[type='range'] {
    binding: url(http://example.com/input/range/);
}

In the code snippet above, it is implied that the shadow subtree, styles, and code are applied/unapplied atomically and dynamically as the type attribute value changes.

TODO: We need to be very careful about executing JavaScript at the behest of CSS. Browsers vendors that have tried that in the past have later come to regret that decision.

Multiple Shadow DOM Subtrees On Element

A new component might want to build upon an existing component to provide new functionality. For example, I might want to turn the input type="range" into a dial, rather than a slider. The dial code is implemented as a shadow DOM subtree and is bound to the element like so:

/* CSS */
input[type='range'].dial {
    binding: url(http://example.com/dial/);
}

To use my dial, I have this bit of code:

function setDialMode(id, dial)
{
    var input = document.getElementById(id);
    if (dial)
      input.classList.add('dial');
    else
      input.classList.remove('dial');
}

The user's expectations is that the input element turns into a dial once the dial class is set and reverts back to the slider once it's removed. Given that slider itself is implemented as a shadow DOM subtree, this indicates that either:

1. Mltiple shadow subtrees could exist on an element at the same time with only one subtree rendered. This implies some sort of "selector memory" ability, which is completely foreign to how things work in the browser today.
2. A shadow subtree is destroyed and rebuilt every time selector applies/unapplies. This is also bad, because destroying discards any modifications to the subtree that may have occurred during its lifetime. In addition, this approach seems very prone to performance troubles.

User Agent-Level Attachment

Since the component model is used to implement built-in HTML elements, there has to be a way apply subtree/style/code at the UA level. The attachment at this level has to satisfy these criteria:

1. It should happen before any other component attachment (like UA-level stylesheets).
2. It should allow the component code to access API methods that are accessible only to the UA-level attachment. For instance, a video element implementation may need to operate on the native video frame. Direct access to the video frame should not be allowed outside of the UA-level components.
3. It should allow the component implementation details to be completely hidden. There should be no way to detect whether an HTML element is built using the component model.

Applying stylesheets to shadow DOM subtree

Styles, defined by the author should not reach into the shadow DOM subtree, at least not by default. Otherwise, the items inside of the built-in HTML elements would react to general style selectors. However, the user agent and user stylesheets must always apply. Otherwise, built-in HTML elements inside of another shadow DOM would lose they styling.

Styling Using Pseudo Elements

To replicate existing functionality, there should be a way to apply styles to the elements in shadow DOM subtree using pseudo elements. For example:

input[type='range']::-webkit-slider-thumb
{
    background-color: Cyan;
}

Currently, this matches the thumb in the slider, allowing you to style it. This capability should be available in the new component model to support these existing use cases. This implies that there must be a way to associate an arbitrary string with an element in a shadow subtree, which is matched as a pseudo-element value on the host element of the shadow subtree.

Nesting Pseudo Elements and Mixing with Pseudo Classes

An element that's exposed to the outside of the shadow DOM with a pseudo-element may also have applicable pseudo-classes. For example, if an element is a button, the user may want to be able to style its various states, exposed via dynamic pseudo-classes:

audio::-webkit-controls-play-button:active {
    background-color: Red;
}

Also, it is useful to be able to style shadow DOM subtrees, nested within each other:

audio::-webkit-controls-timeline::-webkit-slider-thumb:active {
   border: 1px Red solid;
}

The chain of column and double-column delimiters gets confusing quickly:

audio::-webkit-controls-timeline:focused::-webkit-slider-thumb:active {
   border: 1px Red solid;
}

The example above speaks in favor of perhaps matching shadow DOM subtree elements using a (wholly different and new) special selector. For example:

audio part(-webkit-controls-timeline):focused part(-webkit-slider-thumb):active {
   border: 1px Red solid;
}

Events and Shadow Subtrees

Events, originated in shadow subtrees, should, in most cases, escape into the main document. For example, if I click on the thumb of the slider in the input[type=range], I expect to hear all of the respective mouse events at the input. One important notion is that the target of the event and the event object itself should be changed to not to reveal the shadow subtree. In the example above, the value of event.target in the document should be the input, not the thumb.

Focus and Shadow Subtrees

Elements in shadow subtrees can get the input focus. Tab-traversal of elements in the page should include elements in shadow subtrees (subject to the typical constraints—that the elements can have the focus, are visible, and so on.) When an element is projected through an output port, the tab-traversal order may skip from an element in the shadow tree, to an output target element in another part of the tree, and back to a subsequent element in the shadow tree.

Some components, for example input[type="text"], act as monolithic focus targets. Event retargeting of focus and blur events emanating from the shadow tree helps maintain this impression. When the component is focussed, for example by calling the focus function in JavaScript, the component needs to project that focus onto an element it contains. Ideally components could also affect the :focus CSS pseudo-class.

Near-native Performance

HTML elements, built using the component system should perform as well as if they were implemented natively and have similar memory consumption characteristics.

Conceptual Similarity to Ordinary Markup

There are two ways to build a DOM tree, using HTML (a declarative API) and using DOM methods (an imperative API). It seems like a good thing to allow developers having the same options for building a shadow DOM subtree. Both options should feel as similar as possible to creating an ordinary DOM tree.

Template/Stencil Mental Model of a Declarative API

Since both widgets and built-in HTML elements are meant to have multiple instances, created and destroyed at will, it appears logical to adapt the template/stencil mental model of how a shadow DOM subtree is instantiated:

• the subtree is built from some template of a widget/element;
• the subtree is used to manage behavior or widget/element;
• the subtree is destroyed with the widget/element.

Reacting to bound element state change

A widget may want to know if its state (focused/selected/activated) has changed. This can be accomplished by attaching an event listener to its light node:

<html>
<head>
    <binding element="div">
        <template>
            <span>I am asleep</span>
        </template>
        <implementation>
            ({
                xblEnteredDocument: function()
                {
                    var tree = this.shadowTree;
                    this.boundElement.addEventListener("DOMActivate",
                        function()
                        {
                            tree.firstChild.textContent = "I AM AWAKE";
                        }, false);
                }
            })
        </implementation>
    </binding>
</head>
<body>
    <div></div>
</body>
</html>

Reacting to bound element attribute changes

A widget may want to know when its attributes are changed. Similarly to the state change, this can be accomplished by attaching a DOM mutation event listener to its light node (see example for the state change and imagine a DOM mutation event listener being registered instead).

Mindless Forwarding of the Attribute Changes

In cases where the meaning of the attribute needs to be reflected by an element in the shadow DOM subtree, forwarding attribute changes mindlessly (without registering listeners and generally executing script) is useful:

<html>
<head>
    <binding element="myinput">
        <template>
            <h2>O HAI! MY INPUT IZ TEH AWSUM</h2>
            <input type="text" attributes="value disabled readonly">
        </template>
    </binding>
</head>
<body>
    <myinput></myinput>
</body>
</html>

Using Shadow DOM Boundary for Isolation

The boundary between shadow and light DOM presents an interesting opportunity to use this boundary for script and DOM subtree isolation. For example, binding trusted code to an element in an untrusted tree could be used for clearer separation between control and data channel in the document.

There are three cases worth considering:

1. The parent document trusts its components but the components do not trust the parent document.
2. The parent document does not trust its components but the components does trust the parent document.
3. Neither the parent document nor the components trust the other.

Parent trusts component but not vice versa

Because the components are embedded into the parent document, the parent document will be able to control how the component appears to the user. However, the component could hope to hide its internal state from the parent document. More specifically, imagine that the component contains a secret value, such as a capability for accessing a web service. The component should be able to keep this value confidential from the parent document.

Component trusts parent but not vice versa

Much like embedding an iframe, a parent document should be able to include an untrusted component without abandoning its security. For example, imagine a video hosting web site provides a video player component that can be embedded in other documents. Those documents should be able to embed the video player component without allowing the video player to inject arbitrary content into the parent page.

Mutual distrust

If the component system achieves the above two use cases in a sufficiently generic manner, the component model should also allow the parent document and the component to be mutually distrusting. For example, the video player described above could contain a capability for accessing a web service as above.

Faster-than-imperative Parsing of Shadow DOM Markup

It should be possible for browsers to use declarative shadow DOM APIs to achieve performance than the imperative APIs, because the subtree template can be pre-parsed and optimized for cloning + wire-up instead of building from scratch for every instance.

Tens of Thousands of Widgets

The implementation should be able to efficiently handle a very large number of instances from the same template (see discussion).

<html>
<head>
    <binding element="div">
        <style scoped>
            div.pretty {
                background-color: Pretty;
            }
        </style>
        <template>
            <div class="pretty">Pretty is, pretty does.</div>
        </template>
    </binding>
</head>
<body>
    <script>
        for(var i = 0; i < 20 * 1000; ++i)
            document.body.appendChild(document.createElement('div'));
    </script>
</body>
</html>

Insertion Points, Not Containers

Output ports need to be insertion points, not cointainers. If the output port is a container (that is, an existing element in the shadow subtree is designated as a place to add the "light" nodes), some layout scenarios aren't possible. In this example, you can not use flexbox to layout all of the paragraphs in the story:

<template>
    <p>Once upon a time,
    <content includes="p">
    <p>And they lived happily ever after
</template>

It is useful to think of the output port as a collapsed range.

Shadow Subtree Mutation

Because content element is an insertion point, what happens when the elements around it change? What happens when the insertion point moves?

• Modifying includes attribute. What happens when you modify the includes element on the output port?
• Nested shadow subtrees. Suppose you have two bindings, one applied inside another:

<html>
<head>
    <binding element="div#foo">
        <template>
            <span>
                <content></content>
            </span>
        </template>
    </binding>
    <binding element="div#bar">
        <template>
            <div>
                <div id="foo">
                    <span>Blah</span>
                    <content></content>
                </div>
        </template>
    </binding>
</head>
<body>
    <div id="foo">
        <p>Monkeys
    </div>
</body>
</html>

Sequence of actions:

1. Add a div element to div#bar.
2. Move content element in div#bar template as the first child of div

What happens?

Dynamicity of Rules

As XBL2 spec'd today, the includes attribute is fully dynamic. That is, changing this attribute results in node redistribution. Being able to control node distribution from outside of the shadow subtree seems like a useful feature. Consider this example:

<html>
<head>
    <binding element="ul.news">
        <template>
            <h2>Breaking News</h2>
            <ul id="breaking">
                <content includes="li.breaking"></content>
            </ul>
            <h2>Other News</h2>
            <ul id="other">
                <content></content>
            </ul>
        </template>
    </binding>
</head>
<body>
    <ul class="news">
        <li class="breaking">Santa seen crossing Atlantic</li>
        <li>Pies pose serious health risk, scientists say</li>
    </ul>
</body>
</html>

Here, the importance of the news item is controlled outside of the shadow subtree. By setting/removing class breaking on a news item, the consumer of the binding can move it in and out of the breaking news section. Implementing this without dynamic rules seems cumbersome and non-trivial.

Forwarding of the text content

The native HTML <option> element renders the textContent of all its children, but not the children themselves. This seems like a mildly useful feature by itself, and would also be useful for completeness is demagicking the behavior of the element in browsers.