Element Plus 组件库中 Notification 通知的 HTML 渲染问题解析

问题背景

Element Plus 作为一款基于 Vue 3 的流行 UI 组件库，其 Notification 通知组件在 2.9.0 版本中出现了一个影响功能的问题。当开发者尝试使用 HTML 片段作为通知内容时，组件无法正确渲染 HTML 标记，而是直接将 HTML 标签作为纯文本显示。

问题现象

在 Element Plus 2.9.0 版本中，当开发者按照官方文档示例使用 dangerouslyUseHTMLString 属性并传入 HTML 字符串时：

ElNotification({
  title: 'HTML String',
  dangerouslyUseHTMLString: true,
  message: '<strong>This is <i>HTML</i> string</strong>',
})

预期应该渲染为加粗和斜体的文本效果，但实际上却直接显示了原始的 HTML 标签字符串。这个问题在 2.8.8 版本中并不存在，是 2.9.0 版本引入的回归问题。

技术分析

Notification 组件内部应该使用 Vue 的 v-html 指令或类似机制来解析和渲染 HTML 字符串。当 dangerouslyUseHTMLString 设置为 true 时，组件应该：

1. 接收原始 HTML 字符串
2. 安全地解析这些字符串
3. 将其作为 DOM 节点而非纯文本渲染

从问题表现来看，2.9.0 版本可能在以下环节出现了问题：

• HTML 字符串的解析逻辑被错误修改
• 安全防护机制过度拦截了合法 HTML
• 渲染管道中 HTML 字符串被错误地转义

影响范围

这个问题会影响所有需要以下功能的场景：

1. 在通知中显示格式化文本（加粗、斜体等）
2. 嵌入自定义样式的通知内容
3. 在通知中显示带有链接或其他交互元素
4. 需要复杂布局的通知内容

临时解决方案

在官方修复发布前，开发者可以考虑以下临时方案：

1. 降级到 2.8.8 版本
2. 使用纯文本替代 HTML 格式化
3. 自定义封装通知组件，手动处理 HTML 渲染

最佳实践建议

即使问题修复后，使用 HTML 字符串时仍需注意：

1. 仅从可信来源获取 HTML 内容
2. 避免直接渲染用户输入的 HTML
3. 考虑使用更安全的 Markdown 替代方案
4. 对动态 HTML 内容进行适当的消毒处理

总结

Notification 组件的 HTML 渲染功能是 Element Plus 提供的一项重要特性，2.9.0 版本中的这个问题影响了开发者的正常使用。理解这类问题的本质有助于开发者更好地使用 UI 组件库，并在遇到类似问题时能够快速定位和解决。