如何设置子元素中的内容样式？

Question

我有：

<x-dialog><p>Whatever</p></x-dialog>

<p>Whatever</p> 的内容当然会传递到 x-dialog 元素的 <content></content> 标签中：

<polymer-element name="x-dialog">
  <template>
    <link rel="stylesheet" href="dialog.css">
    <core-overlay id="overlay" layered backdrop opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}"  transition="core-transition-center">
      <content></content>
    </core-overlay>
  </template>
  <script type="application/dart" src="dialog.dart"></script>
</polymer-element>

如何以及在哪里设置我的<p> 的样式，即传递给我的元素的内容？请注意，此内容本身位于子元素中，在本例中为 core-overlay，但我认为这没有什么不同（当我将其移出 core-overlay 时，结果相同）。

http://www.polymer-project.org/articles/styling-elements.html 的样式指南没有让我找到解决方案（我假设 Dart 与此 JS 指南相符）。

Answer 1

如果您想将样式规则添加到您的 x-dialog 元素，样式指南中的相关部分是 Styling distributed nodes

将此添加到您的dialog.css

content::content p {
  background-color: blue;
}

否则，您可以像普通 DOM 元素的任何子元素一样设置样式

x-dialog p {
  background-color: blue;
}