css - 造型 polymer 核心支架

Question

默认情况下，core-scaffold 侧边导航的背景颜色为白色，内容的背景颜色接近于灰色。我想反转这些样式，使侧导航的背景颜色为灰色，内容为白色。
我添加了以下规则，它们在 Chrome 上执行我想要的操作:

core-scaffold::shadow core-drawer-panel>div[vertical] {
    background-color: grey;
}

core-scaffold::shadow core-drawer-panel core-header-panel {
    background-color: white;
}

但它不适用于 Firefox。我读到我需要使用 polyfill-next-selector 但我不明白它是如何工作的。我尝试将 polyfill-next-selector {content: '::shadow'} 添加到我的样式中，但它没有帮助。

Answer 1

此处选择器 #1 的问题是 core-drawer-panel 和 div 之间还有另一个元素。它隐藏在 core-drawer-panel 的影子 DOM 中:

core-scaffold
  (shadow root)
     core-drawer-panel
       (shadow root)
         core-selector
       div[drawer]

因此使用原生影子 DOM core-drawer-panel > div 选择它。但是非影子 DOM 浏览器将其视为:

core-scaffold
  core-drawer-panel
    core-selector
      div[drawer]

div 不再是 core-drawer-panel 的直接子项，因此您的选择器不起作用。

我认为第二个选择器的问题可能涉及选择器特异性。 (在我看来，您的规则也不应该在 Chrome 中起作用，但它确实起作用。)

如何解决这个问题？请改用 drawer 和 main 属性:

core-scaffold::shadow [drawer] {
    background-color: grey;
}

core-scaffold::shadow [main] {
    background-color: white;
}

这些规则不需要 polyfill-next-selector。事实上，这些天你很少需要它。您只需要它用于以下规则:

• 在选择器中包含 :content，并且
• 如果您只是删除 :content 则不起作用

有关 polyfill-next-selector 的更多信息，请参阅:https://www.polymer-project.org/docs/polymer/styling.html#at-polyfill