Polymer 1.0 binding properties to inline styles in template

Question

I would like to do something like this in polymer...

<dom-module id="logo-standard">
 <style>
:host {
  display: block;
}
</style>

<template>

<div class="logo-wrap">

  <div style="width: {{logoWidth}}px;">
    Some awesome logo
  </div>

</template>

<script>

(function() {

Polymer({
  is: 'logo-standard',

  properties: {

    logoWidth: {
      type: String,
      value: '400'
    }
  }

});
})();
</script>
</dom-module>

i.e. dynamically style an element using a property.

Is this possible? If so... how?

Answer 1

This question has also been answered by me here

As of Polymer 1.2.0, you can now use Compound Bindings to

combine string literals and bindings in a single property binding or text content binding

like so:

<img src$="https://www.example.com/profiles/{{userId}}.jpg">

<span>Name: {{lastname}}, {{firstname}}</span>

and your example

<div style$="width: {{logoWidth}}px;">

so this is no longer an issue.

Answer 2

In Polymer 1.0, you will need Computed Bindings to do this -

  <div style$="[[_computeWidth(logoWidth)]]">
    Some awesome logo
  </div>

  _computeWidth: function (width) {
      return 'width: ' + width + 'px' + ';color:red;';
  },

See this plunker for reference.

Answer 3

In Polymer 1.0 they changed something that doesn't allow you to inline styles like that. You have to use a computed styles function and have it return the values you want.

 <div style$="{{computeWidth}}">



 computeWidth: function () {
   return 'width:' + this.logoWidth + 'px;'
 }

Here is another post about this subject

Polymer 1.0 - Binding css classes

edit: i forgot the $