Polymer: Styling specific core submenu icons

Question

I have a core-menu with a few core-submenus (each is itself an accordion submenu) beneath it. Each submenu has an icon and a label, defined in the submenu's attribute markup. Is there a way I can set different colors for the icon and the label? Is there a better way to achieve what I'm trying to do?

You can see what I've tried below.

<style>
    core-submenu {
        color: red;
    }
    core-submenu::shadow [icon="maps:local-hospital"] { 
        color: blue; 
    }
    core-submenu::shadow [icon="editor:attach-money"] { 
        color: green; 
    }
</style>

<core-menu>
    <core-submenu icon="maps:local-hospital" label="Benefits">
            <core-item label="Hospitals"></core-item>
            <core-item label="Clinics"></core-item>
    </core-submenu>
     <core-submenu icon="editor:attach-money" label="Money">
            <core-item label="Banks"></core-item>
            <core-item label="ATMs"></core-item>
    </core-submenu>
</core-menu>

Note that I looked at this post on core-submenu styling and this post on core-submenu styling in Firefox but found neither helpful for this situation.

Answer 1

As mentioned in the first post that you link to:

Each core-submenu includes a core-item in its shadow DOM, which is used to display the title and icon for the submenu.

The item itself contains a core-icon in its shadow root, with an ID of icon

Your selector currently targets an element with the icon attribute within the core-submenu's shadow tree. That's not correct, since

• the icon attribute is on the core-submenu element itself, and
• you are trying to target a core-icon element, not an element with the icon attribute.

You need to combine the attribute selector with the core-submenu type selector and its ::shadow pseudo-element, and target the icon within the submenu item's shadow tree with an additional ::shadow pseudo-element, like so:

core-submenu {
    color: red;
}
core-submenu[icon="maps:local-hospital"]::shadow core-item::shadow #icon {
    color: blue; 
}
core-submenu[icon="editor:attach-money"]::shadow core-item::shadow #icon {
    color: green;
}