<script src="http://www.polymer-project.org/platform.js"></script>

<script src="http://www.polymer-project.org/polymer.js"></script>

​

<polymer-element name="my-header-item" attributes="name" noscript>

  <template>

    <content></content>

  </template>

</polymer-element>

​

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

  <template>

    <h1>{{title}}</h1>

    <ul>

      <template repeat="{{item in items}}">

        <li>{{item.name}}</li>

      </template>

    </ul>

    <content id="c" select="my-header-item"></content>

  </template>

  <script>

   Polymer('my-header', {

     domReady: function() {

       this.items = [].slice.call(this.$.c.getDistributedNodes());

     }

   });

  </script>

</polymer-element>

​

<my-header title="My title">

  <my-header-item name="Item 1"></my-header-item>

  <my-header-item name="Item 2"></my-header-item>

</my-header>