HTML原生不支持递归渲染，需手动遍历数据逐层克隆填充；Vue递归组件必须显式声明name属性；Go模板需用{{define}}+{{template}}模拟递归；iframe是页面级隔离，非模板递归。
HTML原生不支持递归渲染
浏览器不会自动展开嵌套的 <template></template> 标签，也不会执行其中的占位符（如 {{item.name}}）或触发子模板实例化。你看到的只是静态 HTML 字符串，cloneNode(true) 后的内容仍是未解析的文本节点。
常见错误现象：用 document.querySelector('template').content.innerHTML 能看到子 <template></template> 标签，但调用 appendChild() 后页面空白或只显示原始标签名；<slot></slot> 在多层 <template></template> 中完全无效——它只在自定义元素的 Shadow DOM 里起作用。
- 必须手动遍历数据，逐层克隆、填充、挂载
- 每次递归都要显式查找目标容器（如
data-slot="children"），清空后插入新生成的 DOM 片段 - 避免直接操作
innerHTML插入未 sanitised 的字符串，防止 XSS - IE 不支持
<template></template>，需降级用<script type="text/template"></script>+innerHTML解析
Vue 递归组件必须声明 name 属性
Vue 的递归调用依赖组件自身的 name 选项，没有它，模板里的 <tree-node></tree-node> 标签会被当作普通 HTML 元素忽略，不会触发递归渲染。
典型结构是父组件内用 v-for 渲染子项，同时把 item.children 作为 prop 传给同名子组件：
立即学习“前端免费学习笔记（深入）”；
<template>
<div class="node">
<span>{{ node.label }}</span>
<tree-node
v-for="child in node.children"
:key="child.id"
:node="child"
/>
</div>
</template>
-
name: 'tree-node'必须显式写在组件选项中，不能靠文件名或注册名推断 - 确保
node.children是数组且非 null，否则v-for会报错或静默失败 - 深层递归（>10 层）可能触发浏览器栈溢出，建议前端加
v-if="depth 限制展开深度 - 不要在模板里做数据过滤（如
v-if="child.visible"），应在 data 或 computed 中预处理干净
Go 的 html/template 需用 {{define}} + {{template}} 模拟递归
Go 模板引擎不支持函数式递归，只能靠定义局部模板并显式调用自身来模拟。关键不是“能不能”，而是“怎么安全传参并终止”。
正确做法是用 {{define "menu-item"}} 单独定义可复用模板，再在 {{range}} 外部用 {{template "menu-item" .}} 启动，每次递归都显式传入子切片：
{{define "menu-item"}}
<li>
<a href="{{.URL}}">{{.Name}}</a>
{{if .Children}}
<ul>
{{template "menu-item" .Children}}
</ul>
{{end}}
</li>
{{end}}
- 不能把
{{define}}写在{{range}}内部，否则作用域混乱 -
.Children必须是值类型切片（如[]MenuItem），指针切片（[]*MenuItem）易因 nil 导致 panic - 后端必须提前切断循环引用（如父子双向指针），否则
json.Marshal或模板渲染时直接 panic - 层级过深（>4 层）建议由前端用 CSS 控制显示，后端只传前几层，避免模板栈溢出
iframe 嵌套不是模板递归，而是页面级隔离
<iframe></iframe> 是加载独立文档上下文，和“模板嵌套”本质不同。它不共享 JS 环境、不继承样式、无法直接访问父页面 DOM，也不参与任何递归逻辑。
适合场景是嵌入第三方内容（如文档、仪表盘、广告），而不是渲染树形菜单或评论流这类需要数据联动的结构。
- 跨域 iframe 内容无法通过 JS 访问，
window.postMessage是唯一通信方式 - 本地开发时
file://协议下部分浏览器禁止 iframe 加载本地 HTML，需起本地服务 - 嵌套多层 iframe 会显著增加内存开销和首屏时间，慎用于高频交互区域
- SEO 友好性差，搜索引擎通常不索引 iframe 内容
真正要递归渲染树状结构，得回到 JS 或服务端模板逻辑里做，iframe 只负责“塞进去一个完整页面”，不负责“展开一层又一层”。
