`<div style$="background: red; color: {{color}}; font-weight: {{fontWeight}};"></div>` is already possible.

[ssthil]

<div style$="background: red; color: {{color}}; font-weight: {{fontWeight}};"></div> is already possible.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#compound-bindings

Originally posted by @ebidel in https://github.com/Polymer/polymer/issues/3512#issuecomment-197558260

[ssthil]

Thanks @ebidel for your guidance. But still few style properties are not binding as expected. Kindly share your inputs.

https://plnkr.co/edit/RvKX1EwOysUEdwbt?open=lib%2Fscript.js

[arthurevans]

Hi @ssthil ... When I look at your sample, it appears that all of the values you're binding are showing up correctly on both Chrome and Safari, unless I'm missing something. You're not actually using backgroundColor at the moment, and note that for camel-case properties, like "backgroundColor", if you want to initialize them from attributes as you're doing, you'll need to specify the attribute name using dash-case ("background-color: yellow"). Here's a plunker with that added:

https://plnkr.co/edit/G87PWInjrhK31SSn?open=lib%2Fscript.js

(Correction: after updating I noticed you're using "font-weight," but using a number. You probably want font-size here.)

Note that this is a really old version of Polymer. For ongoing Polymer work we recommend using Polymer 3, which takes advantage of native support for web components standards in all evergreen browsers including Chrome, Firefox, Safari, and Edge.

Here's a version of this in Polymer 3:

https://stackblitz.com/edit/bhbseg

Note that in Polymer 3, you have to explicitly declare any properties you want to initialize from attributes.

For new projects, we'd recommend LitElement.

[ssthil]

@arthurevans Oh my God!, I don't have words to express my thanks to you. It's really detailed and helped 100%. Since I am new into Polymer side but quite interesting that the community has a super cool person like you 👍🙂 Thank you once again.