elements面板中灰色斜体标签是浏览器自动容错修正的明确信号，表明服务端返回的html存在未闭合标签、非法嵌套或缺失根元素，导致dom被重写；验证须抓取原始响应体而非依赖浏览器显示。
Serverless 返回的 HTML 在 Elements 面板里全是灰色斜体标签
这是浏览器强制容错修正的明确信号，不是前端渲染慢或 JS 没执行完。服务端返回的 HTML 已存在未闭合标签、非法嵌套（如
验证方式不是看缩进或右键“查看网页源代码”，而是用 curl -v https://your.app/ 抓取原始响应体，确认是否含 <title></title> 完整结构；若返回片段（如只有 <div>...），说明服务端组件未包裹根节点，边缘函数直接拼字符串时漏了外层容器。<ul><li>多层条件拼接模板字符串时，最容易在 <code>if 分支末尾漏掉
v-html 或 dangerouslySetInnerHTML 插入用户富文本，但未过滤未闭合的 <span> 或 <code><ul> 片段</ul>
null，被框架转成 <!-- --> 后，后续标签被当作文本内容解析拼 src/href 属性时不加引号导致链接失效
错误示例：res.send(<img src="%24%7BiconUrl%7D">) —— 一旦 iconUrl 含 &、空格或中文，浏览器会把 &y=2 当作新属性名，src 实际为空，最终只显示纯文本 logo.png。
正确做法必须用双引号包裹：res.send(<img src="%24%7BiconUrl%7D">)。单引号在 JSON 场景易冲突，不推荐。
- 所有动态属性值一律走
"${x}"，包括class、data-id、aria-label - 若
iconUrl来自用户输入或第三方 API，必须先encodeURIComponent(iconUrl)，否则&、=会破坏 HTML 结构 - 别依赖前端 JS 修复：服务端拼出的 HTML 语法残缺，后续
v-html、DOMParser全部失效
v-html 渲染后只显示字符串，不执行 HTML 标签
根本不是 Vue 版本或作用域问题，而是服务端返回的 HTML 字符串本身没生效——v-html 只负责把字符串插入 DOM，前提是字符串里 HTML 语法合法。如果服务端拼出来的是 <img src="xxx">（缺引号），浏览器解析失败，v-html 插进去的只是文本节点。
另一个常见误用：在 Element Plus 的 ElNotification 中传 message: '<b>hello</b>' 却漏设 dangerouslyUseHTMLString: true，该开关必须显式开启，否则默认走文本插值，所有标签原样输出。
- 检查服务端响应体原始内容，确认
<b></b>等标签是否真实存在且语法完整 - 避免在
v-html绑定变量为null、undefined或含控制字符（如\u0000），Vue 会静默降级为文本 - 富文本场景下，运行时需轻量清洗：移除
<script></script>、onerror=，保留<strong></strong>、<img>等安全标签再交给v-html
自愈机制在 Serverless 环境中为何反复失败
自愈不是正则替换或字符串修补，它依赖原始 HTML 具备基本语义锚点。如果整页都是 <div class="header"> 这类无语义容器，系统无法识别导航区、主内容等意图，日志里会持续报 <code>"no semantic anchor found"。
真正可靠的自愈必须基于 AST 解析，而非字符串匹配。例如用 parse5 构建节点树后，再判断：<img> 节点是否存在 src 但完全缺失 alt（非空字符串），才注入默认占位文本；对空链接，则标记 data-heal="link-empty" 并告警，而非强行塞文字。
- 必须保留至少一级原生语义标签作为锚点：
<header></header>、<main></main>、<nav></nav>、<time></time> - 避免用
<div role="banner"> 替代 <code><header></header>—— 前者需手动维护aria-*，后者自动进入无障碍树 - 自愈逻辑不能塞进构建阶段，必须运行期持续校验：用户交互、第三方脚本注入都可能在挂载后破坏结构
自愈的起点不是写修复逻辑，而是守住服务端输出前的三条底线：<title></title> 必须存在、禁止内联 style=、<meta charset="utf-8"> 必须声明。这些检查极轻量，却能拦下 80% 的结构性崩塌。
