= Web Components =

Web components are a feature to modularize the web.

Four features:
Html templates (done)
Shadow DOM (bug fixing)
Custom Elements (wip)
Html Imports (waiting on modules)

Html templates are a way to fix parser.
One problem with HTML parser there is not valid html for every possible DOM tree.


Shadow DOM:
Represents a parallel tree.

One problem is that in DOM for example Styles can apply to things that they were not intended to apply to.
In the shadow DOM, there is a boundary between styles in the old DOM and shadow DOM.

Slotting:
For a DIV there is a ShadowRoot that can have SLOTs. SLOT can say to set a property. 

There are three types of Shadow DOM in WebKit:
UserAgent, Closed, Open.

In WebKit there are three names for the rendered tree:
Composed tree == flat tree == rendered tree

There are also two ways to iterate:
Within a given tree -> parentNode
Across shadow trees
Don’t use the 

Custom Elements:
Allows users to give custom names to elements.

Custom Elements are allowed to add various callbacks that are called when things happen in the Shadow tree.

Callbacks are almost Synchronous:
They are not quite synchronous since it calls from C++ to JS.

When callbacks are set to be called we create a stack of every thing that needs to happen. Then when returning back to JS everything in the stack is executed. Those callbacks may, themselves, call back into Bindings that create their own set of callbacks. It’s important to remember that the tree may not look the expected way after the callback.

This stack exists for each element.

It’s possible to asynchronously create custom elements. 
Elements have four states.
1: A builtin element.
2: waiting to be upgraded (when createElement is called but the js for a custom element has not been loaded yet)
3: 

?: Are their possibilities to infinite loop
A: yeah.

One of the biggest challenges is to ensure that custom elements are not modified outside of the functions marked as allowed to modify the shadow element.

The timing of the callbacks was partly designed so that we could avoid security bugs with C++ methods not being robust to the DOM changing under them.

?: Is there any ordering of the callbacks
A: It’s in tree order.

?: In JS can you know if an element is waiting for upgrade
A: Yes. There is a whenDefined method. 

?: Where are the other browsers on this.
A: Chrome is done, Firefox is ~6m, Edge… who knows.

?: How do we test this.
A: Mostly it’s browser specific but maybe we should have a W3C test suite for these things.