CODEWITHSUNDEEP
javascripthtmlpolymerweb-component
Sirko
Sirko

Reputation: 74036

How to assign HTML entities in Polymer element definition?

Alternative question version: How to prevent HTML entities from being escaped, when added in the Polymer element definition?

So assume this simplified example (all includes of polymer libraries are added in the real code):

element definition

<polymer-element name="x-test" attributes="val">
  <template>
    <div>{{shownVal}}</div>
  </template>
  <script>
    Polymer( 'x-test', {
      shownVal: '',
      valChanged: function(){
        this.shownVal = this.val + ' &amp;';
      }
  });
  </script>
</polymer-element>

element usage

<x-test val="123"></x-test>

This will result in an output like this:

123 &amp;

Version: Polymer 0.1.2

What do I need to change/add to have an output like 123 &?

Or is this some kind of bug, I should let the Polymer guys know about?

I know, that I could add the entity in the <template> and this would work, but I have some code, which modifies the input attributes and needs to use entities.

Note: If using the element like this

<x-test val="123 &amp;"></x-test>

everything renders fine.

Upvotes: 4

Views: 1304

Answers (1)

ebidel
ebidel

Reputation: 24109

There are a couple of ways to do this:

  • Custom filters (not documented yet)

    encodeEntities: function(value) {
  var div = document.createElement('div');
  div.innerHTML = this.shownVal;
  return div.innerHTML;
 }

  • Use automatic node finding and set the .innerHTML of some container.

    this.$.container.innerHTML = this.shownVal;

Demo showing both of these: http://jsbin.com/uDAfOXIK/2/edit

Upvotes: 6

Related Questions