CSS Theme for Polymer elements

Question

Recently I have created some Polymer elements using instruction from https://www.polymer-project.org/. I would like my elements to have several color themes like in http://www.google.com/design/spec/style/color.html#color-color-palette.

1. If I use an element's internal CSS and bind it to the element's theme public attribute then it will only work in Chrome and not Firefox or IE. For example:

<style>
:host .toolbar
{
  background-color: {{theme.shade500}};
  color: {{theme.shade500TextColor}};
}
</style>

Is there a way for this to work in browsers other than Chrome or did I make mistakes somewhere?

2. If I use one core-style producer (outside of the element template) and bind its property to the element's theme attribute then it will work across browsers but changing theme of one instance of the element will change the core-style producer thus all the other instances of the element are changed as well. I could create several core-style producers manually but there will be code duplication for a lot of CSS rules (the only difference between them is the color palette). Is there an elegant way to deal with these issues?

3. What is the favorite way to create and use theme for a Polymer element?

Thanks in advance for your answers!

Answer 1

The way that I've seen recommended for creating themes is to make theme stylesheets that make use of the ::shadow and /deep/ CSS selectors.

Answer 2

Firefox binding inside <style> is VERY wonky. you can use it in-line though. works fine here, if you have problems on IE or others browsers that sanitize the code use _ like _style="{{theme.themeName}}" they will ignore it and polymer will pick it up.

That was the only way i got it working in FF. I'm planning on testing with the core-styles but my hopes are so low i'm even lazy about it. I'm sorry i don't have a link for the docs about the _ but it's because the docs are still not very much organized and it's hard to find specific stuff.