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

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

我希望模板文字与foo-nr 1,foo-nr 2.并使用它们作为HTML标记。

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

字符串
因为X是一个占位符,所以我尝试了如下方法:

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


类似的Q/A:

  1. const getHTML = message => unescape(message).replace('\\', '');
  2. const setHTML = escape('<' + foo-nrX + '></' + foo-nrX + '>');
  3. html `${getHTML(setHTML)}`,


最好的结果是:"<foo-nrX></foo-nrX>"
而不是:<foo-nrX></foo-nrX>
所以他没有将其解析为HTML标记,而是将其作为String显示在网站中。

gab6jxml

gab6jxml1#

我自己找到了解决办法:

  1. import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
  2. const foo = '<' + fooNrX + '></' + fooNrX + '>';
  3. render(
  4. html `${unsafeHTML(foo)}`,
  5. document.querySelector('#bigfoo')
  6. );

字符串

相关问题