Polymer: Trouble styling the <core-submenu>

问题

I've created a simple menu inside a <core-drawer-panel> element using <paper-item> with the following:

<paper-item noink>
    <div class="core-menu-item">
        <core-icon icon="maps:beenhere"></core-icon>
        My Places 
    </div>
</paper-item>

As you can see, I've wrapped the insides with a <div> to adjust the icon and text style + positioning. Achieving this effect:

So my question is, how can I style a <core-submenu> in a similar way to achieve the same results?

I've tried following the documentation but styling seems to be very limited in the light DOM; I can only seem to add padding around the whole item, not specifically the icon (for which I'd like to add more padding).

Any suggestions? Thank you.

回答1:

The core-submenu page describes part of the solution. Each core-submenu includes a core-item in its shadow DOM, which is used to display the title and icon for the submenu. You can style this using:

core-submenu::shadow #submenuItem {
  color: red;
}

The item itself contains a core-icon in its shadow root, with an ID of icon, so you can access that using:

core-submenu::shadow #submenuItem::shadow #icon {
  color: blue;
}

来源：https://stackoverflow.com/questions/27771587/polymer-trouble-styling-the-core-submenu