9

I have a list of items in which each item has a .content html value as following. 

  <template is="dom-repeat" items="{{entries}}">
    <li><p class="paper-font-body2">{{item.title}}</p>
      <div>{{item.content}}</div></li>
  </template>

content field is somewhat like this 

  Hello <strong>Polymer</strong>

It shows in browser as plain text. How do I show it as safe html?

EDIT: this issue is raised, but it doesn't help me.

Bao Le
  • 16,643
  • 9
  • 65
  • 68
  • Possible duplicate of [How to inject HTML into a template with polymer](http://stackoverflow.com/questions/22199662/how-to-inject-html-into-a-template-with-polymer) – Jacob Phillips Apr 05 '17 at 10:35

2 Answers2

19

You could easily do:

<template is="dom-repeat" items="{{entries}}">
    <li><p class="paper-font-body2">{{item.title}}</p>
      <div inner-h-t-m-l="{{item.content}}"></div></li>
  </template>

That's what I'm using, bearing in mind that XSS vulnerability is open.

Peter
  • 6,509
  • 4
  • 30
  • 34
  • This worked fine for me. However in my case style classes are not applied to the bound html. – Niklas Nov 22 '18 at 15:01
6

You could try something like this:

<dom-module id="echo-html">

  <template>
    <span>{{html}}</span>
  </template>

  <script>
    Polymer({
      is: 'echo-html',
      properties: {
          html: {
              type: String,
              value: 'html'
          }
      },
      ready: function() {
          this.innerHTML = this.html;
      }
    });
  </script>

</dom-module>

and call it like that I guess:

<div><echo-html html="{{item.content}}"></echo-html></div>
evandor
  • 799
  • 1
  • 10
  • 23
  • Very elegant. Not sure why this.innerHTML, this is what worked for me in a similar situation: Polymer({ is: 'ir-gallery-echo-html', properties: { html: { type: String, value: 'html', observer : 'htmlChanged' } }, htmlChanged: function() { this.$.content.innerHTML = this.html; //this.innerHTML = this.html; } }); – Igor R Jan 28 '16 at 17:13