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>的样式，即传递给我的元素的内容？请注意，在这种情况下，这个内容本身就是一个子元素，核心覆盖，但我不认为这有所不同（当我将它移出核心覆盖时，结果相同）。

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

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

1 个答案: