我们可以将 <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));

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

Can we put <content> inside a <shadow> tag?

html

polymer

web-component

shadow-dom