Is there a way to allow safe html data bind in polymer?

Question

Is there a way to allow data bind with html rendering in polymer?

For example in AngularJS there is the "ng-html-bind" directive that does the job. I am searching something similar.

Here it follows an example of where I am willing to use it.

<core-tooltip>
    <core-icon icon="info-outline" size="30"></core-icon>
    <div tip>
       {{box.description}}
    </div>
</core-tooltip>

Otherwise any suggestion on how to do it differently? I am loading this data from a json file and I am searching for a general way to allow "safe" html rendering (against XSS).

score 4 · Accepted Answer · edited Jun 30 '17 at 17:19

4

This has been answered a couple of times:

edited Jun 30 '17 at 17:19

Keavon

6,837
9
51
79

answered Jul 25 '14 at 20:49

ebidel

23,921
3
63
76

score 2 · Answer 2 · answered Aug 04 '14 at 08:12

As suggested in the accepted answer, I associated an id to my tooltip div:

<div id="tipContent" tip>
    {{box.description}}
</div>

Then made my element listen to the box changes:

Polymer("nautes-box",{
  boxChanged: function(){
      this.$.tipContent.innerHTML = this.box.description.chunk(40).join("<br /><br />");
  }
});

I hope this answer will eventually be useful :)

Is there a way to allow safe html data bind in polymer?

2 Answers2

Linked

Related