如何在 Polymer 1.0 中编辑 <content> 选择器的 CSS

Question

我正在尝试使用 <content> 来提取具有属性 'header' 的元素，但我无法将 CSS 应用于该提取的内容。

这里是 HTML:

<div id="header">
  <content id="headerText" select="[header]"></content>
</div>

这里是 CSS:

#header ::content > #headerText {
  background-color: blue;
}

Answer 1

查看可能适合您的示例：fiddle

CSS:

#header content#headerText {
 background-color: blue;
}

HTML:

<div id="header">
 <content id="headerText" select="[header]">111</content>
</div>

Answer 2

你很接近

<div id="header">
  <content id="headerText" select="[header]"></content>
</div>

#header > ::content #headerText {
  background-color: blue;
}

Answer 3

如果您不知道内容将替换什么，请执行以下操作：

#header ::content * {
  background-color: blue;
}

给内容一个 id 是没有意义的，因为它将被替换... 参见 Documentation 关于这一点。

如果您需要其他同级内容，只需像这样添加一个包装器：

<div id="header">
  <div id="wrapper">
    <content id="headerText" select="[header]"></content>
  </div>
  <span>other stuff here</span>
</div>

然后

#wrapper ::content * {
  background-color: blue;
}

How to edit the CSS of a <content> selector in Polymer 1.0