Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Server-side Rendering and Shadow DOM">
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="http://w3c.github.io/webcomponents/assets/styles/spec.css">
  <style>
    body { font-family: Georgia, serif; line-height: 1.8em; font-size: 1.1em; }
    h2 { font-family: Tahoma, sans-serif; }
  </style>
</head>
<body>
  <h2>A sketch of how server-sider rendering could work with Web Components</h2>
  <p>The setup:</p>
  <ol>
    <li>Make a new <a href="http://w3c.github.io/webcomponents/spec/custom/#dfn-type-extension">type extension</a> custom element <code>shadow-root</code>. This element is registered very early on, during bootstrapping phase. Functionally, the element is very simple: it's a <code>template</code> 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.</li>
    <li>Modify the sugaring framework (Brick, Polymer, whatevs) to be aware that upon birth (at the time of <code>createdCallback</code> 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.</li>
    <li>Build a companion server-side rendering piece that enables spitting out the freeze-dried, <code>shadow-root</code>-laden markup.</p>
  </ol>
  <p>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.</p>
  <p>The sketch:</p>
  <my-a>
    <template is="shadow-root">
      <style>
        my-b { color: red; }
      </style>
      <my-b>
        <template is="shadow-root">
          <style>
            span { color: green; }
          </style>
          <span>BAR</span><content></content>
        </template>
        <span>FOOO</span>
      </my-b>
    </template>
  </my-a>
  
​
  <script>
  
  ~function() {
  
    function TemplateShadowRoot() {}
    TemplateShadowRoot.prototype = Object.create(HTMLTemplateElement.prototype);
    TemplateShadowRoot.extends = 'template';
    TemplateShadowRoot.prototype.createdCallback = function() {
      var parent = this.parentElement;
      if (!parent)
        return;
​
      parent.createShadowRoot().appendChild(
        document.importNode(this.content, true));
      parent.removeChild(this);
    }
  
    document.registerElement('shadow-root', TemplateShadowRoot); 
  }();
  
  </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dglazkovpro
0viewers