This inquiry may have a broader scope than initially presented, however, I wanted to be as precise as possible. It seems challenging to utilize jsFiddle with Polymer due to the various imports required, but hopefully some code snippets will suffice.
Currently, I am working on customizing a core-menu structured 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>
The challenge lies in styling the core-items within the submenu differently from the core-submenu itself. Selecting using core-submenu core-item works in Chrome, yet in Firefox it also selects the text "First submenu" and "Second submenu."
Upon inspecting the DOM structure in Firefox dev tools, it appears that Polymer is generating a nested structure similar to this:
<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>
...
In an attempt to address this issue, I tested #submenu core-item, which resolved one problem but created another. Chrome was unable to locate the items, as the polyfill did not assign the submenu id to the core-submenu element. After spending considerable time trying different selectors, I'm still seeking a solution that works seamlessly across both browsers. Any suggestions or guidance are appreciated.