Rendering an escaped string with lit element?

Question

This demo first highlights html contained inside the fs-highlight element and assigns the result to the _code property.

The render method then renders the template with the _code highlighted html inserted into the code element like this:

  render() {
    if (this.language) {
      return html`
    <h1>Hello</h1>
    <pre><code class="language-${this.language}">${this._code}</code></pre>
    `;
    }
    return html`
    <h1>Hello</h1>
    <pre><code>${this._code}</code></pre>
    `;
  }

And I was expected to see <test></test>. However it renders as:

<span class="hljs-section">&lt;test&gt;</span><span class="hljs-section">&lt;/test&gt;</span>

And this is because the result has quotes around it like this (Looking at it in developer tooling):

"<span class="hljs-section"><test></span><span class="hljs-section"></test></span>"

How do we get it to render so that the browser converts the highlight string to html?

Answer 1

You can use the unsafeHTML directive which renders a string as HTML:

import {unsafeHTML} from 'lit/directives/unsafe-html.js';
...
<code>${unsafeHTML(this._code)}</code>

Or you can use the browser's native innerHTML property:

<code .innerHTML="${this._code}"></code>