6

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?

north
  • 605
  • 7
  • 22

2 Answers2

11

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.

Zikes
  • 5,888
  • 1
  • 30
  • 44
  • Since this works fine (at least at the moment), I'm gonna use it temporarily. I would prefer a proper solution, so I'm not gonna mark this as the correct answer. But I upvoted it at least. Thanks! – north Jun 14 '15 at 10:30
  • 1
    @Zikes, you broke Polymer! – Christoph Bühler Jan 19 '16 at 15:58
0

we are working on Polymer 1.0.x support. Have you checked https://github.com/Juicy/juicy-html/tree/1.0.x ?

tomalec
  • 890
  • 10
  • 27