I am having trouble rendering a value with custom html inside into an element. ex:

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

Binding:

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

I am expecting something same as innerHtml behavior in JavaScript.

I am having trouble rendering a value with custom html inside into an element. ex:

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

Binding:

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

I am expecting something same as innerHtml behavior in JavaScript.

• javascript
• html-parsing
• stenciljs

Share Improve this question Follow edited May 9, 2018 at 9:07 Mohamad Al Asmar asked Apr 23, 2018 at 14:48 Mohamad Al AsmarMohamad Al Asmar 1,18711 gold badge1717 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 23 +50

You can use

<h1 innerHTML={this.title} />

This is not a good practice in JSX, it is against the idea of virtual DOM and it's not creating virtual nodes.

You should try like this

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

Binding

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

Or if it is a more plex situation, build another smaller ponent.

However using innerHTML will work, but should be used in different situations more details here(at the bottom of the page).