Inject html in web component

Question

My dart web component :

<template>
   <div>
      <!--  some html -->
      <p>{{content}}</p>
   </div>
</template>

works fine with simple text, but something, I want to display rich content. So content could contains html, like <div class="blue">hello</div> or hypertext link. But, I just see full html the output. When I inspect the dom, I see the html content in quotes. I think it's for security, but can I change he behavior ? Or doing otherwise ?

Answer 1

You can use the <content> tag.

Your web ui template:

<template>
   <div>
      <!--  some html -->
      <content></content>
   </div>
</template>

Then when you use your component you can specify the content to insert:

<x-your-component>
  <div class="blue">hello</div>
</x-your-component>

And in some other location:

<x-your-component>
  <a href="#">hello</a>
</x-your-component>

You can see an example in the WebUI article.

Answer 2

By default, content bound to templates is sanitized, i.e. everything which can be interpreted as HTML is escaped properly.

If you want to avoid this, your content variable (or, in general, any expression used for binding), must be an instance of SafeHtml. More info here.

You can create a SafeHtml instance like this:

var content = new SafeHtml.unsafe("<b>This is bold</b>");

This is still in flux, so expect the unexpected.