css - Styling polymer core-scaffold -

css - Styling polymer core-scaffold -

by default background-color of side nav in core-scaffold white , background-color of content close grey. want reverse these styles, background-color of side nav gray , content white. added next rules , want on chrome:

core-scaffold::shadow core-drawer-panel>div[vertical] { background-color: grey; } core-scaffold::shadow core-drawer-panel core-header-panel { background-color: white; }

but doesn't work on firefox. i've read need utilize polyfill-next-selector can't understand how works. tried prepend polyfill-next-selector {content: '::shadow'} styles didn't help.

the problem selector #1 here there's element between core-drawer-panel , div. it's hidden in core-drawer-panel's shadow dom:

core-scaffold (shadow root) core-drawer-panel (shadow root) core-selector div[drawer]

so native shadow dom core-drawer-panel > div selects it. non-shadow dom browser sees as:

core-scaffold core-drawer-panel core-selector div[drawer]

the div no longer direct kid of core-drawer-panel, selector doesn't work.

i think issue sec selector may involve selector specificity. (it doesn't me rule should work in chrome, either, does.)

how work around this? utilize drawer , main attributes instead:

core-scaffold::shadow [drawer] { background-color: grey; } core-scaffold::shadow [main] { background-color: white; }

you don't need polyfill-next-selector these rules. in fact, need @ these days. need rules that:

include :content in selector, and don't work if remove :content

for more info on polyfill-next-selector, see: https://www.polymer-project.org/docs/polymer/styling.html#at-polyfill

css polymer shadow-dom