根本原因是vue默认使用文本插值转义html，element plus notification组件需显式设置dangerouslyusehtmlstring: true才能启用v-html渲染，否则message中所有html标签均被原样显示为纯文本。
为什么v-html渲染后只显示字符串，不执行HTML？
根本原因是Vue默认走文本插值，v-html没启用或被覆盖。常见于直接写message: '<b>hello</b>'却漏掉dangerouslyUseHTMLString: true——Element Plus的Notification、Message等组件都必须显式开启该开关，否则所有标签都被转义为纯文本。
容易踩的坑：
- 在
ElNotification里传message时，只设HTML字符串，不设dangerouslyUseHTMLString:true - 用
v-html绑定变量，但变量值为空、null或undefined，结果渲染出空白而非报错 - 服务端返回的HTML字符串含非法控制字符（如
\u0000），触发Vue校验失败，静默降级为文本
动态HTML里src、href属性不生效怎么办？
不是JS逻辑问题，而是HTML语法本身不合法：属性值没加引号，浏览器解析失败。比如<img src="logo.png">会被当成src="logo.png"以外的任意内容处理，实际渲染时src为空，最终显示为文字logo.png。
实操建议：
- 拼接HTML字符串时，强制用双引号包裹所有属性值：
<img src="" imgurl> - 用
DOMParser预检再插入：const doc = new DOMParser().parseFromString(htmlStr, 'text/html')，检查doc.body.innerHTML是否与原始一致 - 避免手动拼接，改用模板字面量+转义函数，例如：
`${escapeHtml(title)}<br>${escapeHtml(content)}`
如何让不合规HTML也能“勉强渲染”？
真实业务中，富文本编辑器导出的HTML常含嵌套错误、未闭合标签或废弃属性（如align）。浏览器会静默修复，但v-html和DOMParser不保证兼容。不能靠try-catch捕获——HTML解析错误根本不会抛异常。
可行路径只有两条：
- 开发期用
html-validate或VS Code插件vscode-htmlhint做CI拦截，提前发现<div> <p>未闭合类问题 </p> <li>运行时对输入做轻量清洗：移除<code><script></script>、onerror=等高危片段，保留<strong></strong>、<img>等安全标签，再交给v-html - 对小程序或mp-html环境，额外过滤
-webkit-前缀和transform: rotate(45deg)等不支持样式，否则背景色、flex布局可能丢失 - 把自定义样式抽成全局类，在
main.css里定义，避开scoped限制 - 检查是否启用了
append-to-body: false，若挂载到非body节点，可能因父容器overflow: hidden截断弹层 - 表格类复杂HTML在Notification里基本不可靠，应改用Dialog或独立页面展示
Element Plus Notification里HTML样式失效怎么调？
不是CSS写错了，而是组件内部样式作用域隔离或优先级压制。Notification弹层自带.el-notification__content类，会重置margin、line-height甚至color，导致你写的<div style="color:red">被覆盖。
<p>解决方向很明确：</p>
<ul>
<li>不用内联<code>style，改用class并配合!important（仅限紧急场景）
