dart - 在 Web 组件中注入 html

Question

我的飞镖网络组件：

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

可以很好地处理简单的文本，但有些东西，我想显示丰富的内容。所以content可以包含 html、like<div class="blue">hello</div>或超文本链接。但是，我只看到完整的 html 输出。当我检查 dom 时，我看到引号中的 html 内容。我认为这是为了安全，但我可以改变他的行为吗？还是不这样做？

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.