我们可以将 <content> 放在 <shadow> 标记中吗？

Question

有没有办法将<content select=".someClass"></content> 之类的东西放在聚合物模板中的<shadow> 标记中，如下所示：

<shadow>
    <content select=".someClass"></content>
</shadow>

如果有怎么办？因为当我尝试时它根本不显示。

Answer 1

没有声明的方式来做到这一点。可以使用 JavaScript 执行此操作，方法是选择您知道存在于 <shadow> 中的元素，然后使用 getDistributedNodes() 将内容拉出插入点并将其附加到该已知元素。

在 Polymer 中，您可以利用 automatic node finding 轻松做到这一点

如果您知道父元素中有一个带有id 或foo 的元素，您可以执行以下操作：

// hacky pseudo code
// assuming you have a <content id="content"> element
var content = this.$.content.getDistributedNodes().array();
content.forEach(function(node) {
  this.$.foo.appendChild(node);
}.bind(this));