Polymer core-submenu styling in Firefox?

问题

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>

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.

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

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?

回答1:

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

Here is the reason it worked:

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

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.

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

来源：https://stackoverflow.com/questions/25734090/polymer-core-submenu-styling-in-firefox

标签

css

firefox

css-selectors

polymer

shadow-dom