Scott Scott - 2 months ago 6
CSS Question

Passing parameter to web component to use in class fails

I have the following code in a element that works fine:

<i class="fa fa-user"></i>


However, I want to change the icon based on a parameter. So I changed that line to this:

<i class="fa fa-{{icon}}"></i>


And then I added the following property to the Polymer element:

icon: {
type: String,
value: 'user'
}


Running it as is, without even trying to pass a different value and just letting it use the default
'user'
, it doesn't render properly. The DOM just has this:

<i class="style-scope widget-iconblock"></i>


I've tried a few other things, including replacing the entire
<i>
tag with
{{i}}
then having that return a calculated value similar to
"<i class='fa fa-" + self.icon + "'></i>"
but that rendered the literal text.

What am I doing wrong?

Answer

Binding properties to native attributes requires Polymer's attribute-binding syntax (i.e., class$="{{prop}}"):

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <i class$="fa fa-{{icon}}"></i>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-foo',
        properties : {
          icon: {
            type: String,
            value: 'user'
          }
        }
      });
    });
    </script>
  </dom-module>
</body>