How to inject HTML into a template with Polymer 1.x?

Question

A part of the template of my Polymer component is supposed to render unescaped HTML from a JSON response (yes, it's safe to do so in this case). I used juicy-html (https://github.com/Juicy/juicy-html) for this up until now, but it doesn't work anymore with Polymer 1.x.

The corresponding part of my template looked pretty much like this:

<template if="{{item.part1}}">
  <div>
    <template is="juicy-html" content="{{item.part1.part2  | callFunction}}"></template>
  </div>
</template>

I read about a few solutions for injecting HTML with earlier versions of Polymer, but I'm wondering if there is a "canonical way" to achieve this with 1.x?

Answer 1

A slightly hack-ish way to bind a node's innerHTML property:

<div inner-h-t-m-l="{{myProp}}"></div>

Polymer infers capitalization from hyphens, translating the following character to uppercase, and when you use equals (=) instead of equals-dollar (=$) Polymer binds to the node's property rather than the attribute.