聚合物-自定义元素含量

Question

I am learning Polymer. I am in the process of developing a custom element. I have a plunk of it here . My element loads some data. At this time, my element looks like this:

<dom-module id="data-library">  
  <template>
    <paper-header-panel flex>
      <div class="flex">
        <template is="dom-repeat" items="[[ items ]]" as="item">
          <div>[[ item.firstName ]]</div>
        </template>
      </div>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: "data-library",
      properties: {
        items: {
          type: Object,
          value: function() {
            return [];
          }
        }
      },

      ready: function() {
        this.push('items', { firstName: 'John' });
        this.push('items', { firstName: 'Bill' });
      }
    });
  </script> 
</dom-module>

I want the consumer to be able to have some control over the layout of the items. Right now, the items are always listed vertically. However, I would like to let the consumer do something like:

<data-library>
  <item-template><b>[[ item.firstName ]]</b></item-template>
</data-library>

In this scenario, the consumer is telling the custom control the item template to use. Is there a way to do something like this in Polymer? If so, how?

Answer 1

That's not too easy. The iron-list element does something similar. The source should work as inspiration. With iron-list you pass a <template><item-template>...</item-template>custom-content</template>