Polymer 如何注射<；模板>；将其作为元素含量提供给聚合物组分

我想将模板注入聚合物组件，如下所示：

<polymer-element name="foo-bar">
  <template>
    <content></content>
    <!-- content is expected to contain a template with id="layout"-->
    <template bind ref="layout">
      default content template
    </template>
  </template>
  <script src="index.js"></script>
</polymer-element>

默认内容模板

组件的使用：

<foo-bar>
    <template id="layout">another content template</template>
</foo-bar>

另一个内容模板

不幸的是，由于某种原因，作为元素内容提供的模板没有被接管

当模拟所希望的行为时，使用

<polymer-element name="foo-bar">
  <template>
    <template id="layout">
      custom content template
    </template>
    <template bind ref="layout">
      default content template
    </template>
  </template>
  <script src="index.js"></script>
</polymer-element>

自定义内容模板
默认内容模板

引用的模板（id=“layout”）按预期使用

感谢您的帮助：-）

为我的内容使用模板#布局。因此，我希望您的shadowdom中的模板使用lightdom模板的内容。这就是你在书中看到的

但是，如果要使用用户提供的渲染灯光dom

，则必须使用

template.createInstance（）

将其激活。默认情况下，模板是惰性的。对于这个用例，您也不需要

。这是用于渲染的，在这种情况下，它没有真正意义

下面的示例还显示了如何设置。它还显示了如何在轻型dom中使用

{{}

绑定，并在创建实例时填充它们

<div id="container"></div>

<template if="{{showDefault}}">
  default content template
</template>

attached: function() {
  var template = this.querySelector('template');
  if (template) {
      this.$.container.appendChild(
          template.createInstance({foo: 5}));
      this.showDefault = false;
    }
}

默认内容模板
附：函数（）{
var template=this.querySelector（'template'）；
如果（模板）{
此.$.container.appendChild(
createInstance（{foo:5}））；
this.showDefault=false；
}
}

完整代码：

默认内容模板
聚合物({
showDefault:true，
附：函数（）{
var template=this.querySelector（'template'）；
如果（模板）{
//允许在模板的{{}中使用聚合物表达式。
如果（！template.bindingDelegate）{
template.bindingDelegate=this.element.syntax；
}
此.$.container.appendChild(
createInstance（{foo:5}））；
this.showDefault=false；
}
}
});
另一个内容模板。还支持数据：{{foo}

非常有用-谢谢！！但是您的jsbin示例将我带入下一个问题：如果我将foo bar polymer元素定义移动到外部（html）文件中并将其导入主html文件中，其中提供的元素将再次不被使用，输出将再次成为“默认内容模板”。有什么想法吗？那是因为模板在另一个文档中。这应该有帮助：。源代码