title: How can I set class name dynamically?
body: <p>I have understood from my last question <a href="https://stackoverflow.com/questions/30600115/polymer-1-0-issue-with-displaying-values-inside-template-is-dom-repeat">here</a> that string concatenate is not allowed with 0.9 and above (currently I am migrating to version 1.0).</p>
  
  <p>I have to rather wrap every variable inside separate HTML element.</p>
  
  <p>However there are times when I need to use a <code>href</code> or <code>class</code> attribute to be assigned with values dynamically. I cannot make it to work directly like the following:</p>
  
  <pre><code>&lt;a href="http://example.com/user/{{userid}}"&gt;Link text&lt;/a&gt;
  </code></pre>
  
  <p>since 1.0 won't allow string concatenation!</p>
  
  <p>Please see the snippets below. I am trying to pass an attribute value from my <code>index.html</code> which in turn should replace the value in <code>class</code> attribute inside my custom element. But it is not working and I understand why.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dom-module id="multi-color-bar-chart"&gt;
    &lt;template&gt;
      &lt;div id="chart"&gt;
            &lt;p&gt;{{title}}&lt;/p&gt;
            &lt;div class="{{v1bg}}"&gt;
                &lt;!-- I want {{v1bg}} to be replaced by value sent from index.html --&gt;
                &lt;span&gt;{{value1}}&lt;/span&gt;%
            &lt;/div&gt;
            &lt;div class="v2" style="background:#ffcc00;"&gt;
                &lt;span&gt;{{value2}}&lt;/span&gt;%
            &lt;/div&gt;
            &lt;div class="v3" style="background:#369925;"&gt;
                &lt;span&gt;{{value3}}&lt;/span&gt;%
            &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
        (function () {
            Polymer({
                is: 'multi-color-bar-chart', //registration of element
                properties: {
                    title: { type: String },
                    value1: { type: String },
                    value2: { type: String },
                    value3: { type: String },
                    v1bg: { type: String }
                }
            });
        })();
    &lt;/script&gt;
  &lt;/dom-module&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the snippet in index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;multi-color-bar-chart
    title="Annual"
    value1="45.5"
    value2="22.3"
    value3="32.2"
    v1bg="#ff0000"&gt;
    ...
    ...
  &lt;/multi-color-bar-chart&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am passing a hex code <code>#ff0000</code> via <code>v1bg</code> attribute which I intend to actually replace the property inside the element.</p>
  
  <p>I don't know yet if there is a work around to it. Might have used <code>document.querySelector()</code> but didn't try that yet. If there is a direct HTML approach that would be wonderful.</p>