When you want to render HTML markup code that comes from an input slot, you should use innerHTML
. In the logic of your elementary component, you should use model<SlotId>Chaged
method to then set the innerHTML
property to the desired element. Let's say you have have a component with a string input slot called html
, and you want to render this html code within a div whose id is container
. To aim this, code may look as follows:
... modelHtmlChanged: function (html) { var container = document.querySelector('#container'); continer.innerHTML = html; } ...
Do not use Polymer data binding
Yo may also think that above behavior can be achieved using Polymer data binding within the view of the elementary component (html template) by means of the model
as follows:
<template> <div> {{model.html}} </div> </template>
However, this code won't work since Polymer will escape the value of model.html.