How to embed HTML in a template using Polymer 1.x?

Question

Part of the template of my Polymer component should display unescaped HTML from the JSON response (yes, in this case it is safe). I have used juicy-html ( https://github.com/Juicy/juicy-html ) for this so far, but it no longer works with Polymer 1.x.

The corresponding part of my template looked something like this:

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

I read about several HTML injection solutions with earlier versions of Polymer, but I wonder if there is a “canonical way” to achieve this with 1.x?

Answer 1

A bit of a hacky way to bind the node innerHTML property:

 <div inner-html="{{myProp}}"></div> 

The polymer takes capitalization from hyphens, converting the next character to uppercase, and when you use equals ( = ) instead of equals-dollar ( =$ ), Polymer binds to the node property, not the attribute.

Answer 2

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