Значение привязки как html в stenciljs

Question

У меня возникли проблемы с отображением значения с пользовательским HTML внутри элемента. например:

this.title = 'Hello <b> stencil </b>'; << response value from an API 

Переплет:

<h1>{this.title}</h1>

Я ожидаю чего-то такого же, как и поведение innerHtml в JavaScript.

Answer 1

Ты можешь использовать

<h1 innerHTML={this.title} />

Answer 2

Это не очень хорошая практика в JSX, она противоречит идее виртуального DOM и не создает виртуальные узлы.

Вы должны попробовать вот так

this.salute = 'Hello';
this.name='stencil';

переплет

<h1>{this.salute} <b>{this.name}</b></h1>

Или, если это более сложная ситуация, создайте еще один меньший компонент.

Однако используя innerHTML будет работать, но следует использовать в разных ситуациях более подробно здесь (внизу страницы).