CODEWITHSUNDEEP
csspolymershadow-dom
moriesta
moriesta

Reputation: 1200

Styling polymer core-scaffold

By default the background-color of side nav in core-scaffold is white and the background-color of content is close to grey. I want to reverse these styles, so that the background-color of side nav is grey and the content is white.
I added following rules and they do what I 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 it doesn't work on Firefox. I've read that I need to use polyfill-next-selector but I can't understand how it works. I tried to prepend polyfill-next-selector {content: '::shadow'} to my styles but it didn't help.

Upvotes: 0

Views: 465

Answers (3)

hasyee
hasyee

Reputation: 130

Try to use:

<style shim-shadowdom>
   core-scaffold::shadow core-drawer-panel>div[vertical] {
       background-color: grey;
   }

   core-scaffold::shadow core-drawer-panel core-header-panel {
       background-color: white;
   }
</style>

http://robdodson.me/shadow-dom-css-cheat-sheet/

Upvotes: 1

moriesta
moriesta

Reputation: 1200

Just inspected the markup with Firefox and found a solution:

On Chrome: 

core-scaffold::shadow [drawer] {
    background-color: rgba(243, 241, 255, 1);
}

core-scaffold::shadow [main] {
    background-color: rgba(255, 255, 255, 1);
}

On Firefox: 

core-scaffold [drawer] {
    background-color: rgba(243, 241, 255, 1);
}

core-scaffold [main] {
    background-color: rgba(255, 255, 255, 1);
}

Upvotes: 0

DocDude
DocDude

Reputation: 2873

The problem with selector #1 here is that there's another element between core-drawer-panel and the 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 with native shadow DOM core-drawer-panel > div selects it. But a non-shadow DOM browser sees this as:

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

The div is no longer a direct child of the core-drawer-panel, so your selector doesn't work.

I think the issue with the second selector may involve selector specificity. (It doesn't look to me like your rule should work in Chrome, either, but it does.)

How to work around this? Use the drawer and main attributes instead:

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

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

You don't need polyfill-next-selector for these rules. In fact, you rarely need it at all these days. You only need it for rules that:

  • include :content in the selector, AND
  • DON'T work if you simply remove the :content

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

Upvotes: 1

Related Questions