创建基于HTML模板的轻量级前端组件引擎

<template> 标签仅是离线容器，轻量级组件引擎本质是JS封装克隆、填充、挂载流程；必须用document.importNode(tmpl.content, true)安全克隆，保留表单状态并兼容Shadow DOM。

<template> 标签本身不是组件引擎，它只是个离线容器；所谓“轻量级组件引擎”，本质是用 JS 封装一套克隆、填充、挂载的固定流程，而不是靠浏览器自动干活。

为什么直接 innerHTML = template.innerHTML 会丢状态

常见错误是把 <template> 当成普通 HTML 片段去操作。但 template.innerHTML 永远为空字符串，浏览器根本不解析其内容——所有子节点实际藏在 template.content 这个 DocumentFragment 里。

• 用 cloneNode(true) 复制后插入，<input checked> 的选中态、<select> 的当前选项、textarea 的光标位置全丢失
• 直接赋值 innerHTML 会销毁已绑定的事件监听器（比如模板里写了个 <button onclick="doSomething()">，克隆后 onclick 不生效）
• 表单控件必须用 .value 或 .checked 设置，不能靠 textContent 或 innerHTML

document.importNode(tmpl.content, true) 是唯一安全克隆方式

它能保留表单状态、正确处理 <select> 选项、兼容 Shadow DOM 场景，是现代 DOM 操作的底线要求。

• 获取模板：const tmpl = document.getElementById('card-template')
• 克隆内容：const fragment = document.importNode(tmpl.content, true)（第二个参数 true 必须传）
• 查找绑定点：fragment.querySelectorAll('[data-bind]')，按 data-bind="title" 定位节点
• 填充数据：文本用 node.textContent = data.title，表单用 node.value = data.inputValue，富文本需先转义再塞 innerHTML
• 挂载：container.appendChild(fragment)，别用 innerHTML += 覆盖已有结构

如何让模板支持“属性传参”而不写死 ID

纯 <template> 没有属性监听或生命周期，所谓“传参”就是调用函数时传入一个对象，JS 手动映射到 DOM 节点。

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

• 模板里禁用硬编码 id="card-1"，会导致多次渲染时 ID 冲突，破坏 CSS 或 JS 查询逻辑
• 用语义化 data-bind 属性替代 class 名，比如 data-bind="author-name" 比 class="author" 更易维护、不易被样式覆盖误伤
• 工厂函数应返回真实 DOM 节点（DocumentFragment），而非字符串，避免重复解析
• 如需后续更新，缓存首次生成的节点，只改 textContent 或 dataset 值，不重新克隆

slot 和内联事件在普通 DOM 中完全无效

这是最容易踩的坑：把 Web Components 的逻辑套到原生 <template> 上，结果什么也不发生，还不报错。

• <slot> 只在挂载到 Shadow DOM 时才生效；普通 DOM 中写 <slot name="header"></slot> 等于白写
• 内联 onclick、oninput 在克隆后不会自动绑定，得手动加 addEventListener
• <script> 或 <style> 在 cloneNode 或 importNode 后不会执行或生效，别指望它自动加载
• 想动态分发内容？只能靠 JS 手动查 data-slot 并 appendChild，没有语法糖可省

真正难的不是克隆，而是怎么让每次填充都保持状态一致、不污染全局、不触发重排；多数人卡在“以为模板能自己活过来”，其实它连呼吸都要你手动捏人工呼吸器。