Swap - InnerHTML

Code

<h1 innerHTML={this.title} />

Context

Sometimes you have text, which has HTML tags interspersed within it. When you try to render this via data binding, the tags are rendered as text and is not evaluated.

innerHTML is used in these cases, where the text is evaluated and shown. ( Please ensure that the text is properly sanitized - can use Dompurify as a sanitization library, otherwise you might be opening yourself to XSS attacks )

this.title = DOMPurify.sanitize(someTitle);

Reference

Binding value as html in stenciljsStack Overflow

How to sanitize third-party content with vanilla JS to prevent cross-site scripting (XSS) attacksChrisFerdinandi