How to render html tag inside Template literals (LitElement)?

Question

I want Template literals with foo-nr1, foo-nr2 ... and use them as HTML Tag.

render(
        html `<foo-nrX></foo-nrX>`,
        document.querySelector('#bigfoo')
      );

Because X is a placeholder, I tried everything like this:

        html `<${fooplaceholder}></${fooplaceholder}>`,

or this from similar q/a here:

const getHTML = message => unescape(message).replace('\\', '');
const setHTML = escape('<' + foo-nrX + '></' + foo-nrX + '>');

        html `${getHTML(setHTML)}`,

However, best results are: "<foo-nrX></foo-nrX>"

instead of: <foo-nrX></foo-nrX>

So he doesnt parse it as HTML Tag, instead it shows up as String into the website.

Answer 1

I found the solution by myself:

import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';

const foo = '<' + fooNrX + '></' + fooNrX + '>';

render(
        html `${unsafeHTML(foo)}`,
        document.querySelector('#bigfoo')
      );