Question

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

我有一个核心菜单，如下所示：

<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现在找不到相关项，因为填充不会将submenu ID添加到core-submenu标记。我已经尝试了一个小时来找到一个可以跨两个浏览器工作的选择器（或一组选择器）。有什么帮助吗？

Answer 1

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

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

这就是它起作用的原因：

铬

 <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)排除了影子DOM中的chrome版本的核心项目，而#submenu core-item会在Firefox中找到所有（甚至是单项子菜单）子菜单核心项目。

使用此解决方案承担几英镑的技术债务，所以我希望比我聪明的人找到更好的解决方案！现在要摸索应用程序中的其他样式选择器......

Firefox中的聚合物核心 - 子菜单样式？

1 个答案: