使用LitElement结合marked库渲染Web组件时HTML标签直接显示如何解决？

问题原因 #

Lit 的 html 模板标签默认开启了安全过滤，会对插值位置（${} 包裹的内容）的所有HTML特殊字符做自动转义，避免XSS注入风险。你调用marked转换得到的是原生HTML字符串，直接插值会被识别为普通文本，因此浏览器会直接展示标签内容而非渲染为对应DOM元素。

解决方案 #

使用Lit官方提供的 unsafeHTML 指令渲染你确认安全的HTML内容即可，修改代码如下：

1. 引入unsafeHTML指令：

// my-element.ts 头部新增导入
import { unsafeHTML } from 'lit/directives/unsafe-html.js';

2. 修改render方法，将marked转换结果用unsafeHTML包裹：

override render() {
  return html`${unsafeHTML(marked(this.markdown))}`;
}

注意：unsafeHTML 会直接把字符串解析为DOM，存在XSS安全风险。如果你的markdown内容来自用户输入，务必先对内容做XSS过滤处理再渲染。

内容的提问来源于stack exchange，提问作者Rabindra