聚合物元素中只有一个引用 <content></content>？

Question

构造的归结是这样的。具有聚合物元素：

<dom-module id="demo-element">
  <template>
     <span><content></content></span>
     <span><content></content></span>
   </template>
</dom-module>

这只给出了一次内容。例如 <demo-element>Hello</demo-element> 只给出 "Hello" 而不是 "HelloHello"。使用带绑定的属性，给出了预期的结果。好像漏掉了一些小细节，有谁去过类似的地方吗？

Environment:
 Dart version 1.14.0
 WebStorm 11.0.3

From pubspec.yaml:
environment:
  sdk: '>=1.9.0 <2.0.0'

dependencies:
  polymer: ^1.0.0-rc.15
  web_components: ^0.12.0
  polymer_elements: 1.0.0-rc.8
  browser: ^0.10.0
  reflectable: ^0.5.0
  polymer_interop: ^1.0.0-rc.5

Answer 1

这是设计使然。 <content> 不生成元素，它只是投影它们。

多个 <content> 没有选择器不会执行任何操作。第一个 "grabs" 所有子项并将它们投影到放置的位置。

您可以有多个 <content> 标签，但它们应该有不同的选择器，例如

<header-elem>
  <content select=".header"></content>
</header-elem>
<drawer-elem>
  <content select=".drawer"></content>
</drawer-elem>
<body-elem>
  <content></content>
</body-elem>

像

一样使用

<my-component>
  <div>body</div>
  <div class"header">header</div>
  <div class"drawer">header</div>
</my-component>

然后第一个 <div> 被投射到最后一个 <content> 元素，因为它不匹配任何特定的选择器，其他 div 被投射到匹配的 <content> 标签选择器。

聚合物元素中只有一个引用 <content></content>？

Only one reference to <content></content> in polymer element?

dart-polymer