sorvell

var shadow = host.createShadowRoot({
  // called synchronously for each node *added* to shadow's distribution pool
  // called sequentially for each content in shadow until `true` is returned.
  shouldDistributeNodeToInsertionPoint: function(node, content) {
    // to implement catch-all
    return true;
    // to implement <content select="...">
    // return node.matches(content.getAttribute('select'));
    // to implement <content slot="...">
    // return node.getAttribute('slot') === content.getAttribute('slot');

sorvell

desirable:
- distribution before change handlers: allows use of distribution info in change handlers, good
- ready before attached?

Shady:
1. Create A
2. create A.root: stamps template containing B (goes all the way down)
  2.1 B is created... go to 1 for it
3. initialize (we ensure this is top down starting at A and this whole process is 1 loop)
  3.1 A is distributed

sorvell

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;

sorvell

<link href="../core-icon-button/core-icon-button.html" rel="import">

<polymer-element name="my-element">

  <template>
    <style>    
      #design_host {
        width: 100%;
        height: 100%;
        position: absolute;

sorvell

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;

sorvell

<link rel="import" href="../ace-element/ace-element.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;

sorvell

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;

sorvell

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;

sorvell

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;

sorvell

<link rel="import" href="../paper-calculator/paper-calculator.html">

<polymer-element name="your-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;