Вводят HTML в веб-компоненте

Question

Мой дротик веб-компонент:

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

отлично работает с простым текстом, но что-то, я хочу показать богатое содержание. Таким образом, content может содержать html, например <div class="blue">hello</div> или гипертекстовую ссылку. Но я просто вижу полный html вывод. Когда я проверяю dom, я вижу содержимое html в кавычках. Я думаю, что это для безопасности, но могу ли я изменить его поведение? Или иначе?

Answer 1

Вы можете использовать тег <content>.

Ваш шаблон веб-интерфейс:

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

Затем, когда вы используете компонент, который вы можете указать содержимое для вставки:

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

И в каком-то другом месте:

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

Вы можете увидеть пример в WebUI article.

Answer 2

По умолчанию содержание, связанное с шаблонами, дезинфицировано, то есть все, что может быть интерпретировано как HTML, экранировано должным образом.

Если вы хотите этого избежать, ваша переменная content (или, вообще говоря, любое выражение, используемое для привязки), должно быть an instance of SafeHtml. Подробнее here.

Вы можете создать SafeHtml экземпляр так:

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

Это все еще в движении, поэтому стоит ожидать неожиданного.