4

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.

  • Have your tried this.shownVal = this.val + ' &'; – HBP Jan 11 '14 at 13:48
  • @HBP &amp; was just an example here. I want to insert other HTML entities and I don't want to use their character representation. – Sirko Jan 11 '14 at 13:53
  • OK, assuming the answer to my first question is "yes" then that would imply that the processing of valChanged is converting any HTML special chars like & and < into their entity coding. See then answer to this : stackoverflow.com/questions/5796718/html-entity-decode if you absolutely have to pass HTML entities. – HBP Jan 11 '14 at 13:58
6

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

|improve this answer|||||
  • 1
    A question: Is this implicit conversion of HTML entities considered a feature or a bug? If feature, I think it should be documented somewhere (FAQ?). – Sirko Jan 15 '14 at 7:42
  • The solution given here doesn't work for me. Perhaps things are different as there is a different version of Polymer around now? – mknaf Dec 16 '14 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.