Как вставить HTML в шаблон с полимером

Я использую polymer-jsonp для выполнения запросов JSONP, но ответ иногда содержит html.

Например, предположим, что post.content "<strong>Foo</strong> bar", как я могу отобразить {{post.content}}, чтобы "Foo" выделен жирным шрифтом?

<polymer-element name="feed-element" attributes="">
  <template>
    <template repeat="{{post in posts.feed.entry}}">
      <p>{{post.content}}</p>
    </template>
    <polymer-jsonp url="url" response="{{posts}}"></polymer-jsonp>
  </template>
  <script>
    Polymer('feed-element', {
      created: function() { },
      attached: function() { },
      detached: function() { },
      attributeChanged: function(attrName, oldVal, newVal) { }
    });
  </script>
</polymer-element>

Ответ 1

Полимер не будет маркировать неэкранированный HTML через привязку данных, поскольку он становится уязвимостью для атак XSS.

В настоящее время ведутся переговоры о том, чтобы сделать штамп HTML в ограниченных обстоятельствах или разрешить настраиваемую фильтрацию, но это еще не реализовано на уровне данных.

Сегодня вы можете делать то, что хотите, используя дополнительный пользовательский элемент, но, опять же, имейте в виду, что могут произойти плохие вещи, если вы сделаете ненадежный HTML на своей странице.

Вот пример, который показывает эту технику:

http://jsbin.com/durajiwo/1/edit

Ответ 2

Для тех, кто ищет полимер 1.0

<dom-module id="html-echo">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
  </template>
</dom-module>

<script>
  (function () {
    Polymer({
      is: 'html-echo',
      properties: {
        html: {
          type: String,
          observer: '_htmlChanged'
        }
      },
      _htmlChanged: function (neo) {
        // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
        this.innerHTML = neo;
      }
    });
  })();
</script>

Ответ 3

Если вы уверены, что это то, что вы хотите сделать, просто используйте innerHTML.

_renderHtml: function(html) {
  this.$.dynamicHtmlContainer.innerHTML = html;
}

Или для динамического добавления дочернего элемента shadow-dom:

_renderHtml: function(html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  Polymer.dom(this).appendChild(div);
}

Я думаю, что Polymer.dom удаляется в Polymer 2.0, хотя.