Problem with special characters and HTML entities

[elfakamal]

Hi, I have a little problem displaying some special characters.

I have a dummy element that I called polymer-label, it's an extended bootstrap label with a button.

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="polymer-label" attributes="labelType">
  <template extend="span">
    <style>
      /* styles for the custom element itself - lowest specificity */
      :host {
        /*display: block;*/
      }

      span.label {
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        display: inline;
      }

      #button-remove {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;

        top: 0px;
        height: 18px;
        outline: none;
      }

      /*
      style if an ancestor has the different class
      :host(.different) { }
      */
    </style>
    <span class="label label-{{labelType}}">
      {{innerHTML}}
    </span>
    <button id="button-remove" class="btn btn-xs btn-{{labelType}} glyphicon glyphicon-remove"></button>
  </template>
  <script>
    Polymer('polymer-label', {
      //applyAuthorStyles: true,
      //resetStyleInheritance: true,

      // element is fully prepared
      ready: function(){ },
      // instance of the element is created
      created: function() { },
      // instance was inserted into the document
      enteredView: function() { },
      // instance was removed from the document
      leftView: function() { },
      // attribute added, removed or updated
      attributeChanged: function(attrName, oldVal, newVal) { }
    });
  </script>
</polymer-element>

the problem is when I use special characters like & or < :

<polymer-label labelType="success">hello & world</polymer-label>

the element converts them to HTML entities:

Can someone help me on this ? thx.

[sjmiles]

The proper method for displaying light-dom content (instead of {{innerHTML}}) is with a content node.

<span class="label label-{{labelType}}">
  <content></content>
</span>

In general, bindings won't let you pass unescaped HTML content to help prevent XSS attacks.

[elfakamal]

so cool :-)
Thank you very much @sjmiles