在Firefox中的聚合物核心 - 子菜单样式？ [英] Polymer core-submenu styling in Firefox?

问题描述

这可能是一个比我所说的更通用的问题，但我想尽可能具体。我不知道如何使用jsFiddle与Polymer，所有的导入，但我希望一些代码样本就足够了。

This may be a more general purpose question than how I stated it, but I wanted to be specific as possible. I'm not sure how to use jsFiddle with Polymer, with all of the imports, but I hope some code samples will suffice.

我有一个核心菜单看起来像这样：

I have a core-menu that looks like this:

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

我想做的是设计 code> s在子菜单中不同于 core-submenu 本身。 core-submenu核心项目选择器在Chrome中工作，但在Firefox中，它选择文本第一个子菜单和第二个子菜单。

What I'm trying to do is style the core-items in the submenu differently from the core-submenu itself. The core-submenu core-item selector works in Chrome, but in Firefox it is selecting the text "First submenu" and "Second submenu" as well.

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

I looked into the firefox dev tools, and it looks like Polymer is creating this sort of DOM tree:

<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不会将子菜单 id添加到 core-submenu 标记。我一直在试图找到一个选择器（或一组选择器），将工作在两个浏览器一个小时。任何帮助？

So, I tried #submenu core-item which works, but now I have the opposite problem! Chrome is now not finding the items, since the polyfill doesn't add the submenu id to the core-submenu tag. I've been trying for an hour to find a selector (or set of selectors) that will work across both browsers. Any help?

推荐答案

我希望这不是唯一的答案，因为它真的很丑陋， p>

I hope this isn't the only answer, because it's really ugly, but this selector worked.

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>
     ...

Firefox

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

所以：not（：类型）排除了阴影DOM内的chrome版本的核心项目，而 #submenu核心项目查找所有（甚至单个项目子菜单）在Firefox中的子菜单核心项目。

So the :not(:only-of-type) excludes the chrome version's core-item inside the shadow DOM, while the #submenu core-item finds all (even single item submenus) the submenu core-items in Firefox.

用这个解决方案投入几英镑的技术债务，所以我希望有人比我更聪明找到一个更好的解决方案！现在，通过应用程序中的其余样式选择器fumble ...

Putting on a few pounds of technical debt with this solution so I hope someone smarter than me finds a better solution! Now to fumble through the rest of the styling selectors in the app...

这篇关于在Firefox中的聚合物核心 - 子菜单样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！