css - Firefox 中的 polymer 核心子菜单样式？

Question

这可能是一个比我所说的更普遍的问题，但我想尽可能具体。我不确定如何将 jsFiddle 与 Polymer 以及所有导入一起使用，但我希望一些代码示例就足够了。

我有一个如下所示的核心菜单:

<core-menu>
   <core-submenu label="First submenu">
     <core-item label="Test submenu item 1">
     <core-item label="Test submenu item 2">
     <core-item label="Test submenu item 3">
     <core-item label="Test submenu item 4">
   </core-submenu>
   <core-submenu label="Second submenu">
   </core-submenu>
</core-menu>

我想做的是在子菜单中为 core-item 设置不同于 core-submenu 本身的样式。 core-submenu core-item 选择器在 Chrome 中有效，但在 Firefox 中它也会选择文本“First submenu”和“Second submenu”。

我查看了 firefox 开发工具，看起来 Polymer 正在创建这种 DOM 树:

<core-menu>
  <core-submenu>
    <core-item><div id="label">First submenu</div></core-item>
      <core-menu id="submenu">
        <core-item>Test submenu item 1</core-item>
        ...

所以，我尝试了有效的#submenu core-item，但现在我遇到了相反的问题! Chrome 现在找不到这些元素，因为 polyfill 没有将 submenu id 添加到 core-submenu 标签。我已经尝试了一个小时来寻找一个适用于两种浏览器的选择器(或一组选择器)。有帮助吗？

Answer 1

我希望这不是唯一的答案，因为它真的很难看，但是这个选择器起作用了。

core-submenu core-item:not(:only-of-type), #submenu core-item

这是它起作用的原因:

Chrome

 <core-menu>
   <core-submenu>
     #shadow-root
       <core-item>Submenu 1</core-item>
     <core-item>Item 1</core-item>
     ...

火狐

 <core-menu>
   <core-submenu>
     <core-item>Submenu 1</core-item>
     <core-menu>
       <core-submenu>
         <core-item>Item 1</core-item>
         ...

所以 :not(:only-of-type) 排除了 shadow DOM 中的 chrome 版本的核心项，而 #submenu core-item 找到了所有(甚至是单项子菜单)Firefox 中的子菜单核心项。

用这个解决方案背负了几磅技术债，所以我希望比我聪明的人找到更好的解决方案!现在摸索应用程序中其余的样式选择器...