Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

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.

  • No labels