Question

在Chrome和Safari中查看http://mycommunity.org。（这是post-dart2js。）

点击右上角的“创建”按钮，注意对话框中的元素如何在Chrome中设置样式，但不在Safari中。

在Safari中我无法得到风格的东西！

这是Chrome中的工作原理：

content::content h1 {
  margin: 0 0 15px 0;
  color: #334C80;
}

即使我执行以下操作，它也无法在Safari中运行：

core-overlay::content h1 {
  color: orange;
}

这就是它在代码（link）中的存在方式：

<link rel="import" href="../../../../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../../../../packages/core_elements/core_overlay.html">
<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>

Answer 1

谢谢@ebidel。答案确实是：

polyfill-next-selector { content: ':host h1'; }
::content h1 {
  color: red;
}

http://www.polymer-project.org/docs/polymer/styling.html#directives

我认为文档可能更简单，当你想做X时，使用Y＆＃34;。即使在阅读造型指南之后，我也不知道我想要polyfill- *选择器。

无法在Safari中设置元素（content :: content）的内容样式，在Chrome中运行良好

1 个答案: