The setup:
shadow-root
. This element is registered very early on, during bootstrapping phase. Functionally, the element is very simple: it's a template
that, when instantiated, immediately turns itself into a shadow root of the parent element--thus enabling a very mechanical process of inflating the entire composed tree.createdCallback
is called), custom elements could already have a shadow tree. In such case, the framework should not rebuild the tree, but only install the necessary event listeners, bindings, etc. in the existing shadow tree.shadow-root
-laden markup.
The first part is implemented below as a sketch. Second part seems relatively straightforward. Third part is not exactly trivial, but possible, given Polymer already has an entire DOM implementation in its Shadow DOM polyfill.
The sketch: