HTML模板技术在实现组件插槽递归解析中的逻辑-html教程-PHP中文网

无法递归解析，因其仅为静态documentfragment，不执行脚本、不解析嵌套template、不激活slot；必须用js手动实现克隆、填充与递归挂载逻辑。

html模板技术在实现组件插槽递归解析中的逻辑

<template></template> 本身不递归、不解析、不绑定数据，它只是个静态容器；想靠它自动展开树形结构或联动 <slot></slot> 实现递归内容分发，必然失败。

为什么 `<template></template>` 无法直接支持递归解析

浏览器把 <template></template> 当作纯文档片段（DocumentFragment）处理：不执行脚本、不解析子 <template></template>、不触发 <slot></slot> 分发逻辑。哪怕你嵌套写成：

<template id="menu"><li>{{ item.name }}</li>
  <template v-if="item.children"><recursive-menu :items="item.children"></recursive-menu></template></template>

——这段里的 v-if 和 :items 在原生 HTML 中完全无效，cloneNode(true) 后只保留字面文本，变量和指令全被当普通字符串。

<template></template> 没有上下文、没有作用域、没有编译阶段
内部的 <slot></slot> 不会被识别为插槽占位符，只是普通标签
克隆出来的节点中，所有子 <template></template> 仍处于“休眠”状态，需手动遍历+再次克隆

如何用 `<template></template>` + JS 手动实现递归挂载

核心是分离“模板存储”和“运行时递归逻辑”：模板只存结构，JS 控制哪一层该用哪个模板、传什么数据、是否继续下钻。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

为每层结构定义独立 <template></template>，比如 id="menu-item" 和 id="menu-sub"
写一个递归函数，接收数据节点和目标容器，先克隆对应模板，再填充文本/属性，最后检查 children
对每个子节点，创建新容器（如 document.createElement('ul')），递归调用自身并 append 进去
避免直接操作 innerHTML，改用 textContent 替换变量，防止 XSS 和事件丢失

示例关键片段：

function renderMenuItem(node, container) {
  const tpl = document.getElementById('menu-item').content.cloneNode(true);
  tpl.querySelector('.label').textContent = node.label;
  container.appendChild(tpl);

  if (node.children && node.children.length) {
    const ul = document.createElement('ul');
    node.children.forEach(child => renderMenuItem(child, ul));
    container.appendChild(ul);
  }
}

`<slot></slot>` 在递归场景中根本不起作用

Shadow DOM 的 <slot></slot> 是静态分发机制，只在自定义元素挂载后，对其**直系子节点**做一次匹配投射。它不感知数据变化，更不参与 JS 递归流程。

你在递归函数里动态生成的 DOM 节点，不是自定义元素的直系子节点，<slot></slot> 完全看不见
即使你用 customElements.define 注册了 <recursive-menu></recursive-menu>，它的 shadowRoot 里放的 <slot></slot> 只能接收外部 HTML 中写死的 <h2 slot="title"></h2> 这类节点，不能接收 JS 动态构造的内容
想让插槽“随数据变”，必须放弃原生 <slot></slot>，改用 JS 显式控制内容插入位置（如 container.append(...)）