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

【问题标题】：How to edit the CSS of a <content> selector in Polymer 1.0如何在 Polymer 1.0 中编辑 <content> 选择器的 CSS
【发布时间】：2016-03-09 12:09:52
【问题描述】：

我正在尝试使用 <content> 来拉取具有“标题”属性的元素，但我无法将 CSS 应用于拉取的内容。

这里是 HTML：

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

这里是 CSS：

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

【问题讨论】：

除非冒号不属于聚合物中的某些东西，否则它们会引起问题，因此请删除它们并执行以下操作：#header content#headerText
冒号是 Polymer 语法的一部分，没有它们就无法工作。
我认为您从根本上误解了如何使用内容标签，也许如果您模拟您想要实现的目标，我们将能够为您提供更多帮助
我觉得你疯了。问题已解决，只是因为这不是您的答案，请不要对问题投反对票。
@Ulsting 如果我遇到这种情况，我并不生气，抱歉，通常使用内容标签是最后的手段。我建议您尽可能使用属性。

标签： html css polymer polymer-1.0 shadow-dom

【解决方案1】：

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

#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;
}

【讨论】：

只有当内容在我认为的标签中时才会起作用，#header > ::content 将完成所有内容（这真的取决于操作的目的）
虽然这可行，但它不允许将任何其他内容放在与内容相同的 div 内。
这就是为什么您需要对内容进行包装的原因，请参阅文档
取决于你想要做什么属性可能是一个更好的解决方案plnkr.co/edit/Go1hngYXTzCCUDRkHsHU?p=preview
@Ulsting 我添加了一个有兄弟姐妹的用例，它对你有用吗？

【解决方案2】：

你很亲密

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

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

【讨论】：

我知道this 在它的例子中就是这么说的，但在它下面有 > 我有它的地方，这两种方法都不适合我。
OK 内容标签的id没有传递给dom
是的，但我认为你错过了内容标签的重点。它不应该包含任何本机内容，它应该“拉”它正在选择的元素，并将其“添加”到当前视图。将文本放在内容元素中违背了它的目的。
然后你把它放在外面你用#header #headerText > ::content 调用它

【解决方案3】：

查看可能对您有用的示例：fiddle

CSS：

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

HTML：

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

【讨论】：

这不是标签应该做的。它从父目录中获取 html 元素，向其中添加内容会破坏此目的。