A sketch of how server-sider rendering could work with Web Components

The setup:

  1. Make a new type extension custom element 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.
  2. Modify the sugaring framework (Brick, Polymer, whatevs) to be aware that upon birth (at the time of 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.
  3. Build a companion server-side rendering piece that enables spitting out the freeze-dried, 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: