polymer-dom-elements.html

<dom-module id="x-project">
  <template>
    x-project: [<content></content>]
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-project'
  });
</script>

<dom-module id="x-reproject">
  <template>
    <x-project>x-reproject: [<content></content>]</x-project>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-reproject'
  });
</script>

<dom-module id='x-rereproject'>
  <template>
    <x-reproject>x-rereproject: [<content></content>]</x-reproject>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-rereproject',
    attachedCount: 0,
    attached: function() {
      this.attachedCount++;
    }
  });
</script>

<dom-module id="x-test">
  <template>
    <x-rereproject><span id="projected">projected</span></x-rereproject>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-test'
  });
</script>

<dom-module id="x-test-no-distribute">
  <template>
    <span>Local dom without insertion point.</span>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-test-no-distribute'
  });
</script>

<dom-module id="x-distribute">
  <template>
    <div>
      <span>Elements without test attribute</span>
      <div id="notTestContainer" style="color: white; background-color: green; min-height: 1em;">
        <content id="notTestContent" select=":not([test])"></content>
      </div>
      <span>Elements with test attribute</span>
      <div style="color: white; background-color: red; min-height: 1em;">
        <div id="testContainer">
          <content id="testContent" select="[test]"></content>
        </div>
      </div>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: "x-distribute"
  });
</script>

<dom-module id="x-compose">
  <template><x-project id="project"></x-project></template>
</dom-module>
<script>
  Polymer({
    is: 'x-compose'
  });
</script>


<dom-module id="x-select3">
  <template><content select="[s3]"></content></template>
  <script>Polymer({is: 'x-select3'});</script>
</dom-module>

<dom-module id="x-select2">
  <template><x-select3 id="select"><content select="[s2]"></content></x-select3></template>
  <script>Polymer({is: 'x-select2'});</script>
</dom-module>

<dom-module id="x-select1">
  <template><x-select2 id="select"><content select="[s1]"></content></x-select2></template>
  <script>Polymer({is: 'x-select1'});</script>
</dom-module>

<dom-module id="x-select-class3">
  <template><content select=".s3"></content></template>
  <script>Polymer({is: 'x-select-class3'});</script>
</dom-module>

<dom-module id="x-select-class2">
  <template><x-select-class3 id="select"><content select=".s2"></content></x-select-class3></template>
  <script>Polymer({is: 'x-select-class2'});</script>
</dom-module>

<dom-module id="x-select-class1">
  <template><x-select-class2 id="select"><content select=".s1"></content></x-select-class2></template>
  <script>Polymer({is: 'x-select-class1'});</script>
</dom-module>


<dom-module id="x-echo">
  <template><content></content></template>
  <script>Polymer({is: 'x-echo'});</script>
</dom-module>


<dom-module id="x-redistribute-a-b">
  <template>
    <x-echo id="echo1"><content select=".a"></content></x-echo>
    <x-echo id="echo2"><content select=".b"></content></x-echo>
  </template>
  <script>Polymer({is: 'x-redistribute-a-b'});</script>
</dom-module>

<dom-module id="x-attr">
  <template>Attr1</template>
  <script>Polymer({
    is: 'x-attr',
    hostAttributes: {
      bar: 'bar'
    },
    properties: {
      foo: {type: Boolean, reflectToAttribute: true, value: false}
    }

  });</script>
</dom-module>

<dom-module id="x-attr2">
  <template>Attr2</template>
  <script>Polymer({
    is: 'x-attr2',
    properties: {
      foo: {type: Boolean, reflectToAttribute: true, value: true}
    }

  });</script>
</dom-module>

<dom-module id="x-select-attr">
  <template>
    Foo: [<content select="[foo]"></content>]
    Bar: [<content select="[bar]"></content>]
  </template>
  <script>Polymer({is: 'x-select-attr'});</script>
</dom-module>

<dom-module id="x-compose-select-attr">
  <template>
    <x-select-attr id="select">
      <x-attr id="attr1"></x-attr>
      <x-attr2 id="attr2"></x-attr2>
    </x-select-attr>
  </template>
  <script>Polymer({is: 'x-compose-select-attr'});</script>
</dom-module>


<dom-module id="x-clonate">
  <template><span>[</span><content></content><span>]</span></template>
  <script>Polymer({
    is: 'x-clonate'
  });</script>
</dom-module>

<dom-module id="x-attach3">
  <style>
    :host {
      display: block;
      border: 1px dashed orange;
      padding: 4px;
      box-sizing: border-box;
    }

    :host ::content .add3 {
      box-sizing: border-box;
      height: 20px;
      background: #333;
      border: 2px solid yellow;
    }
  </style>
  <template>
    <content></content>
    <template is="dom-if" if="{{shouldIf(done.count)}}">
      <x-attach2></x-attach2>
    </template>
  </template>
  <script>Polymer({
    is: 'x-attach3',
    properties: {
      done: {value: {count: 0}}
    },
    ready: function() {
      this.done.count++;
    },
    attached: function() {
      var d = document.createElement('div');
      d.className = 'add3';
      Polymer.dom(this).appendChild(d);
    },
    shouldIf: function(x) {
      return x < 3;
    }
  });</script>
</dom-module>

<dom-module id="x-attach2">
  <style>
    :host {
      display: block;
      border: 1px dashed tomato;
      padding: 4px;
    }

    :host ::content .add2 {
      box-sizing: border-box;
      height: 20px;
      background: gray;
      border: 2px solid yellow;
    }
  </style>
  <template>
    <x-attach3><content></content></x-attach3>
    <template is="dom-if" if="{{shouldIf(done.count)}}">
      <x-attach1></x-attach1>
    </template>
  </template>
  <script>
  Polymer({
    is: 'x-attach2',
    properties: {
      done: {value: {count: 0}}
    },
    ready: function() {
      this.done.count++;
    },
    attached: function() {
      var d = document.createElement('div');
      d.className = 'add2';
      Polymer.dom(this).appendChild(d);
    },
    shouldIf: function(x) {
      return x < 3;
    }
  });</script>
</dom-module>

<dom-module id="x-attach1">
  <style>
    :host {
      display: block;
      border: 1px dashed seagreen;
      padding: 4px;
    }

    :host ::content .add1 {
      box-sizing: border-box;
      height: 20px;
      background: lightgray;
      border: 2px solid yellow;
    }
  </style>
  <template>
    <x-attach2><content></content></x-attach2>
  </template>
  <script>Polymer({
    is: 'x-attach1',
    attached: function() {
      var d = document.createElement('div');
      d.className = 'add1';
      Polymer.dom(this).appendChild(d);
    }
  });</script>
</dom-module>

<dom-module id="x-commented">
  <template><span>[</span><!--comment--><content></content></span><span>]</span></content></template>
  <script>Polymer({is: 'x-commented'});</script>
</dom-module>


<dom-module id="polymer-dom-repeat">
  <template>
    <div>
      <div>
        <div>
          <div id="container">
            <template is="dom-repeat" items="{{items}}">
              <div>stuff</div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  Polymer({
    is: 'polymer-dom-repeat',
    properties: {
      items: {
        value: function() {
          return ['a', 'b', 'c', 'd', 'e'];
        }
      }
    }
  });
  </script>
</dom-module>

<dom-module id="x-deep-contains">
  <template>
    <div id="shadowed"></div>
    <content select="#light"></content>
  </template>
  <script>
    Polymer({
      is: 'x-deep-contains',
      created: function() {
        var e = document.createElement('div');
        e.id = 'light';
        Polymer.dom(this).appendChild(e);
        e = document.createElement('div');
        e.id = 'notdistributed';
        Polymer.dom(this).appendChild(e);
      }
    });
  </script>
</dom-module>

<dom-module id="x-wrapped">
  <script>
  Polymer({
    is: 'x-wrapped'
  });
  </script>
</dom-module>


<dom-module id="x-shadow-host-root-0-0">
  <template>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-0-0',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-0-0-light-0">
  <script>
    Polymer({
      is: 'x-shadow-host-root-0-0-light-0',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-0-0-light">
  <template>
    <div>
      <div>
        <x-shadow-host-root-0-0-light-0></x-shadow-host-root-0-0-light-0>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-0-0-light',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-0-1">
  <template>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-0-1',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-0-1-light">
  <script>
    Polymer({
      is: 'x-shadow-host-root-0-1-light',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-0">
  <template>
    <content></content>
    <div>
      <x-shadow-host-root-0-0>
        <x-shadow-host-root-0-0-light></x-shadow-host-root-0-0-light>
      </x-shadow-host-root-0-0>
    </div>
    <x-shadow-host-root-0-1>
      <x-shadow-host-root-0-1-light></x-shadow-host-root-0-1-light>
    </x-shadow-host-root-0-1>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-0',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-0-light">
  <script>
    Polymer({
      is: 'x-shadow-host-root-0-light',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-1-0">
  <template>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-1-0',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-1-0-light">
  <script>
    Polymer({
      is: 'x-shadow-host-root-1-0-light',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-1-1">
  <template>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-1-1',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-1-1-light">
  <script>
    Polymer({
      is: 'x-shadow-host-root-1-1-light',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-1">
  <template>
    <content></content>
    <div>
      <x-shadow-host-root-1-0>
        <x-shadow-host-root-1-0-light></x-shadow-host-root-1-0-light>
      </x-shadow-host-root-1-0>
    </div>
    <div>
      <div>
        <div>
          <x-shadow-host-root-1-1>
            <x-shadow-host-root-1-1-light></x-shadow-host-root-1-1-light>
          </x-shadow-host-root-1-1>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-1',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-1-light-0">
  <script>
    Polymer({
      is: 'x-shadow-host-root-1-light-0',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-1-light">
  <template>
    <x-shadow-host-root-1-light-0></x-shadow-host-root-1-light-0>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root-1-light',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root">
  <template>
    <content></content>
    <div>
      <div>
        <x-shadow-host-root-0>
          <x-shadow-host-root-0-light></x-shadow-host-root-0-light>
        </x-shadow-host-root-0>
      </div>
    </div>
    <div>
      <x-shadow-host-root-1>
        <x-shadow-host-root-1-light></x-shadow-host-root-1-light>
      </x-shadow-host-root-1>
    </div>
  </template>
  <script>
    Polymer({
      is: 'x-shadow-host-root',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>

<dom-module id="x-shadow-host-root-light">
  <script>
    Polymer({
      is: 'x-shadow-host-root-light',
      hostAttributes: {
        tabindex: '-1'
      }
    });
  </script>
</dom-module>