Polymer 允许聚合物元件的消费者提供模板

Polymer 允许聚合物元件的消费者提供模板,polymer,web-component,shadow-dom,Polymer,Web Component,Shadow Dom,我正在创建一个显示其他聚合物元素列表的聚合物元素。我希望元素的使用者能够在他们的页面上删除列表元素,并提供在列表项元素中使用的模板。如果他们不提供模板,我想使用默认模板 我试图通过绑定模板的ref属性来实现这一点。如果我提供一个自定义模板,这似乎是可行的,但如果我不提供它,这就不行了 非工作示例: 列表项元素: <polymer-element name="my-item" attributes="item itemTemplate"> <template>

我正在创建一个显示其他聚合物元素列表的聚合物元素。我希望元素的使用者能够在他们的页面上删除列表元素,并提供在列表项元素中使用的模板。如果他们不提供模板,我想使用默认模板

我试图通过绑定模板的ref属性来实现这一点。如果我提供一个自定义模板,这似乎是可行的,但如果我不提供它,这就不行了

非工作示例:

列表项元素:

<polymer-element name="my-item" attributes="item itemTemplate">
  <template>
    <template bind="{{item}}" ref="{{itemTemplate}}">
    </template>

    <template id="_itemTemplate">
      <li>Default template: {{name}}</li>
    </template>
  </template>
  <script>
    Polymer({
      itemTemplate: '_itemTemplate',
      created: function() {
        this.item = {};
      }
    });

  </script>
</polymer-element>

  • 默认模板:{{name}
  • 聚合物({ itemTemplate:“\u itemTemplate”, 已创建:函数(){ this.item={}; } });
    列表元素:

    <polymer-element name="my-list" attributes="drag name list itemTemplate">
      <template>
        <template repeat="{{i in list}}">
          <my-item item="{{i}}" itemTemplate="{{itemTemplate}}"></my-item>
        </template>
      </template>
      <script>
        Polymer({
          ready: function() {
            this.list = [{name: 'Item 1', id: 'item1'},
                         {name: 'Item 2', id: 'item2'},
                         {name: 'Item 3', id: 'item3'}];
          }
        });
    
      </script>
    </polymer-element>
    
    
    聚合物({
    就绪:函数(){
    this.list=[{name:'Item 1',id:'Item 1'},
    {name:'Item 2',id:'Item 2'},
    {name:'Item 3',id:'Item 3'}];
    }
    });
    
    明白了

    我所要做的就是在使用ref绑定到它的模板之前定义默认模板:

    但这似乎仅在同一文件中定义模板时有效。