Polymer core scaffold coloring and paper button

polymer

Solution

I ran into the same problem and it turns out that you can style the elements (the toolbar) inside other elements (core-scaffold) using CSS with a special syntax to access the inner component (which is inside the Shadow DOM) using the `::shadow` pseudo-element.

The top rule changes the color of the title background while the second one changes the background of the content area.

core-scaffold::shadow core-toolbar {
  background: #E5E5E5;
  color: black;
}

core-scaffold::shadow core-header-panel {
  background: #FFF;
  color: black;
}

Source: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat

Update: This didn't work properly with Firefox because of shims. What did it was adding styles with the `shim-shadowdom` directive that gets interpreted only when on a non webcomponent/shadowdom native platform:

<style shim-shadowdom>
  core-scaffold core-toolbar {
    background: #EEE;
    color: black;
  }

  core-scaffold #main core-header-panel {
    background: #FFF;
    color: black;
  }
</style>

Note that to change the background of the content area I also had to select `#main` so porting `::shadow` rules might need a bit of inspecting...

Finally when you need to properly deal with Firefox and other browsers from within a webcomponent/polymer element you can use the `polyfill-rule` or `polyfill-unscoped-rule`.

Problem

I'm starting to use the polymer 0.5 code to build a responsive website. I know it's not fully finished, but nevertheless I find it pretty neat and simple to get stuff done quickly. Now, I'm using the core-scaffold as general layout. I know how to color the sidebar, but I'm not sure where I can style the main content settings. ``` <html> <head> <style> html,body { height: 100%; margin: 0; background-color: #E5E5E5; font-family: 'RobotoDraft', sans-serif; } core-toolbar { background: #E5E5E5; color: white; } paper-item.core-selected { color: #99182c; fill: #99182c; } </style> </head> <body unresolved touch-action="auto"> <core-scaffold> <core-header-panel navigation flex mode="seamed"> <core-toolbar style="background-color: #99182c; color:#fff;">Main site name</core-toolbar> <core-menu selected="0"> <paper-item icon="home" label="Home"></paper-item> <paper-item icon="today" label="Activities"></paper-item> <paper-item icon="account-box" label="People"></paper-item> <paper-item icon="theaters" label="Pictures"></paper-item> <paper-item icon="info" label="Info"></paper-item> <paper-item icon="lock" label="Login"></paper-item> </core-menu> </core-header-panel> <div tool>Home</div> </core-scaffold> </body> </html> ``` So the core-toolbar is styling the left sidebar, but how do I style the main page? Another issue I'm having is that I'd like to work with the paper-elements. However, when using this `core-scaffold`, you'll notice that when the screen is small enough and the tab appears to open the left menu bar, it's a 'normal' button and not a paper one. Since this is in the `core-scaffold`, I don't directly know how to change this (if this is possible). Any ideas?

Original source