Lit 默认对插值内容进行 HTML 转义以防止 XSS，若需将预高亮的 HTML 字符串（如 Prism.js 或 highlight.js 生成的 <test>）作为真实 DOM 渲染，必须显式绕过转义机制，推荐使用 unsafeHTML 指令。
lit 默认对插值内容进行 html 转义以防止 xss，若需将预高亮的 html 字符串（如 prism.js 或 highlight.js 生成的 `
在 Lit 中，模板表达式（如 ${this._code}）默认以 文本内容 方式插入，所有 、<code>>、& 等字符均被自动转义为 <、>、& —— 这是 Lit 的核心安全机制，可有效防御跨站脚本攻击（XSS）。但当你集成代码高亮库（如 highlight.js 或 Prism.js）时，它们返回的是已包含 HTML 标签的字符串（例如 '<span class="hljs-tag"><test></span>'），此时直接插值只会渲染出转义后的源码文本，而非高亮后的 DOM 结构。
✅ 正确做法：使用 unsafeHTML 指令
该指令明确告知 Lit：“此字符串已由可信来源处理，可作为原始 HTML 插入”。需先导入并应用：
import { LitElement, html } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
class MyElement extends LitElement {
private _code = '';
render() {
if (this.language) {
return html`
<h1>Hello</h1>
<code class="language-${this.language}">${unsafeHTML(this._code)}</code>
`;
}
return html`
<h1>Hello</h1>
<code>${unsafeHTML(this._code)}</code>
`;
}
}⚠️ 重要注意事项：
-
unsafeHTML不执行任何清理或过滤，传入的字符串必须确保来自可信上下文（例如服务端预渲染、本地静态资源，或经严格校验的客户端高亮结果）； - 切勿将用户输入、URL 参数、
localStorage原始值等未经净化的内容直接传给unsafeHTML； - 若高亮逻辑在客户端执行（如调用
highlightElement()），请确保所用高亮库本身不引入恶意标签（现代高亮库默认仅输出<span></span>等无交互标签，相对安全）； - 替代方案（如手动设置
element.innerHTML）虽可行，但会脱离 Lit 的响应式更新与生命周期管理，易导致状态不一致，不推荐。
? 最佳实践建议：
将高亮逻辑封装为 @state 受控流程，例如在 updated() 中检测 _rawCode 变化后调用高亮函数并同步更新 _code，再通过 unsafeHTML 渲染——既保障安全性，又保持 Lit 的响应式优势。
