如何在模板文字（LitElement）中呈现 html 标签？

Question

我想要带有 foo-nr1、foo-nr2 ... 的模板文字并将它们用作 HTML 标记。

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

因为 X 是占位符，所以我尝试了这样的一切：

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

或者来自类似的q/a这里：

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

        html `${getHTML(setHTML)}`,

但是，最好的结果是： "<foo-nrX></foo-nrX>"

而不是： <foo-nrX></foo-nrX>

所以他没有将其解析为 HTML 标签，而是在网站中显示为字符串。

Answer 1

我自己找到了解决方案：

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

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

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