Polymer core scaffold coloring and paper button

Question

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 qui

Answer 1

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:

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.