如何在模板文字(LitElement)中呈现html标签?

hpxqektj  于 2023-11-15  发布在  其他
关注(0)|答案(1)|浏览(121)

我希望模板文字与foo-nr 1,foo-nr 2.并使用它们作为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标记,而是将其作为String显示在网站中。

gab6jxml

gab6jxml1#

我自己找到了解决办法:

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

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

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

字符串

相关问题