Vue模板HTML嵌套需遵循原生HTML内容模型，禁用非法嵌套（如p内嵌div），template仅作逻辑容器，v-html绕过编译但无响应式，slot和动态组件保障安全嵌套与响应性。
Vue 模板中 HTML 嵌套的基本规则
Vue 的模板语法本质是增强版的 HTML，但不是所有 HTML 嵌套都直接可用。浏览器原生不识别的标签（如
里嵌 ）会被 Vue 编译器警告或静默修正。
-
v-if 和 v-for 在同一层级（需用
- 真实 HTML 内容模型仍起作用：例如
，否则 Vue 会把 提到 - 自定义组件名若全小写且含短横线（如
使用 v-html 插入含嵌套的 HTML 字符串v-html 是唯一允许运行时插入带嵌套结构的 HTML 的方式，但它绕过 Vue 模板编译，内部指令（v-on、v-model）和响应式绑定全部失效。
- 插入内容必须来自可信源，否则有 XSS 风险；不可直接绑定用户输入的富文本
- 嵌套中的事件需手动用
document.addEventListener 绑定，且注意事件委托与组件卸载后的清理
- 不要对
v-html 容器再使用 v-if 或 v-for —— 这些指令在该节点上会被忽略
// rawHtml = '标题
加粗
动态组件 +
- 默认插槽内容在父组件编译阶段就被解析，保留 Vue 指令和响应性
- 具名插槽（
name 值必须是合法标识符（不能含空格或特殊符号）
-
$slots 和 $attrs，否则子内容丢失
SSR 或构建时预编译场景下的嵌套限制
在 Nuxt 或 Vite+SSG 环境中，HTML 嵌套还受服务端解析和静态生成影响：
-
setup() 中是否提前访问了未就绪的 slots
- 使用
defineAsyncComponent 加载嵌套组件时，异步组件内部的
-
v-pre 可跳过某段嵌套的编译，但仅适用于纯展示，无法与响应式数据联动
真正难处理的不是嵌套本身，而是嵌套层级带来的作用域泄漏、插槽透传断裂和 SSR hydration 不匹配——这些往往在开发后期才暴露，且错误提示模糊。
）会被 Vue 编译器警告或静默修正。
-
只能作为逻辑包装容器，不能渲染为真实 DOM，也不支持绑定v-if和v-for在同一层级（需用或提取到子元素） - 真实 HTML 内容模型仍起作用：例如
中禁止嵌，否则 Vue 会把提到外，导致布局错乱- 自定义组件名若全小写且含短横线（如
使用
v-html插入含嵌套的 HTML 字符串v-html是唯一允许运行时插入带嵌套结构的 HTML 的方式，但它绕过 Vue 模板编译，内部指令（v-on、v-model）和响应式绑定全部失效。- 插入内容必须来自可信源，否则有 XSS 风险；不可直接绑定用户输入的富文本
- 嵌套中的事件需手动用
document.addEventListener绑定，且注意事件委托与组件卸载后的清理 - 不要对
v-html容器再使用v-if或v-for—— 这些指令在该节点上会被忽略
// rawHtml = '
标题
加粗
动态组件 +
- 默认插槽内容在父组件编译阶段就被解析，保留 Vue 指令和响应性
- 具名插槽（
name值必须是合法标识符（不能含空格或特殊符号） -
$slots和$attrs，否则子内容丢失
SSR 或构建时预编译场景下的嵌套限制 在 Nuxt 或 Vite+SSG 环境中，HTML 嵌套还受服务端解析和静态生成影响：
-
setup()中是否提前访问了未就绪的slots - 使用
defineAsyncComponent加载嵌套组件时，异步组件内部的 -
v-pre可跳过某段嵌套的编译，但仅适用于纯展示，无法与响应式数据联动
真正难处理的不是嵌套本身，而是嵌套层级带来的作用域泄漏、插槽透传断裂和 SSR hydration 不匹配——这些往往在开发后期才暴露，且错误提示模糊。
- 自定义组件名若全小写且含短横线（如
