Vue.js 渲染器根据父节点命名空间自动推导子元素命名空间，而非标签名；SVG/MathML 元素需正确嵌套或显式指定，否则降级为 HTML 元素；手动创建 VNode 时应透传或显式设置 namespace 以确保 SSR 与客户端 hydration 一致。

Vue.js 渲染器在创建元素 VNode 时，会根据父节点的命名空间（namespace）自动推导子元素的命名空间，而非仅依赖标签名；SVG、MathML 等特殊命名空间下的元素需显式继承或正确嵌套，否则可能被降级为普通 HTML 元素。

命名空间由父节点继承，非标签名决定

Vue 的 VNode 创建过程（如 createElement 或模板编译生成的 createVNode 调用）中，元素的 ns（namespace）字段默认为 0（即 HTML 命名空间），仅当父 VNode 明确携带 ns: SVG 或 ns: MATH_ML 时，子元素才会自动继承该命名空间。例如：

• <svg><foreignobject><div>...</div></foreignobject></svg> 中，<div> 仍处于 HTML 命名空间，因 <code><foreignobject></foreignobject> 是 SVG 内的 HTML 容器，其子节点不自动继承 SVG 命名空间；
• <svg><g><circle></circle></g></svg> 中，<g></g> 和 <circle></circle> 均继承自 <svg></svg> 的 ns: SVG，渲染器会为其 VNode 设置 ns = 1（SVG 常量）。

内建组件与特殊标签触发命名空间切换

Vue 对部分标签名做了硬编码识别，在创建 VNode 时主动设置命名空间，与父节点无关：


Springboot Vue Builder
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
下载
• svg、math 标签自身会强制设为对应命名空间（ns = 1 或 ns = 2）；
• foreignObject（SVG 中）、annotation-xml（MathML 中）等桥梁标签，虽属特殊命名空间，但其内部默认切回 HTML 命名空间；
• 自定义组件若未显式指定 inheritAttrs: false 或未透传 namespace，不会影响子内容的命名空间推导。

手动创建 VNode 时需显式传入 namespace

使用 h() 或 createVNode() 手动构造时，若需确保某元素处于特定命名空间（如动态生成 SVG 子元素），应显式传入 namespace 参数：

立即学习“前端免费学习笔记（深入）”；

• h('circle', { cx: 50, cy: 50, r: 20 }, []) → 无父上下文时，ns 为 0，可能被当作 HTML 元素忽略；
• h('circle', { cx: 50, cy: 50, r: 20 }, [], SVG) → 强制指定 ns = SVG（即 1），确保正确渲染；
• 推荐方式：从已有 SVG 根节点获取 node.ns 并向下透传，避免硬编码。

服务端渲染（SSR）与 DOM 挂载时的命名空间一致性

命名空间信息仅存在于 VNode 层，不直接序列化进 HTML 字符串；SSR 输出纯 HTML 时不保留 xmlns 属性（除非手动添加），但客户端激活（hydration）时依赖 VNode 的 ns 字段重建正确 DOM 节点类型：

• 若 SSR 输出了 <svg><circle></circle></svg>，但客户端 VNode 缺失 ns，circle 可能被创建为 HTMLCircleElement（不存在）而非 SVGCircleElement，导致样式/属性失效；
• 确保模板编译产物或手动 h() 调用中，SVG 根节点及其后代的 ns 字段完整，hydration 才能匹配正确节点类型。