聚合物模板：什么是内容插入点的有效选择

Question

这可能是一个相当简单的问题，虽然我可以找到一些简单的例子，但我在 Polymer Project 网站上找不到关于这个的文档。在元素的模板中，您可以使用：

<content select="value"></content>

我的问题是 select 属性的有效值是多少。它只是一个元素吗？可以是任何简单的 CSS select 或（例如 "#id"）吗？可以是绑定值吗("{{data}}")?

虽然最终我只是在寻找答案，但我也很乐意接受文档引用或 URL。

Answer 1

我在 Polymer 网站上的教程 one 中找到了这个。

Selecting content: The select attribute on a content element accepts a limited set of CSS selectors. You can only select direct children of the host node, not descendents.

更多reference.

The matching criteria for an insertion point is a set of compound selectors. These compound selectors are restricted to contain only these simple selectors:

类型选择器或通用选择器
class 个选择器
一个 ID 选择器
属性选择器
一个否定伪class, :not()

Answer 2

Polymer 网站上的一些文档隐藏在 Your first Polymer app section. There is a link to the W3C Shadow DOM 规范中，其中说明插入点的有效选择器是：

类型选择器或通用选择器（a、div 等）
class 选择器（例如 .my-class）
一个 ID 选择器（例如 #myid）
属性选择器（例如 [myboolattr]、[myattr="myvalue"]）
一个否定伪class, :not()

您可以在 select 属性中有多个选择器，例如：

<content select='div,.my-class,#myid,[name="myname"]'></content>

绑定也有效：

<content select="{{ mySelector }}"></content>

A * 全选：

<content select="*"></content>

聚合物模板：什么是内容插入点的有效选择

Polymer Template: What are valid selects for content insertion points

templates

web-component

polymer