因为template.content是只读DocumentFragment，只能有一个父节点，首次appendChild后即被移走，后续调用变为空fragment导致静默失败；必须用cloneNode(true)深克隆获取新副本。
为什么直接appendChild(template.content)只能用一次
因为 template.content 是一个只读的 DocumentFragment，它不是普通 DOM 节点，而是“一次性提取源”。第一次 appendChild(template.content) 后，这个 fragment 就从 template 中被移走了，template.content 变成空 fragment，后续再调用会静默失败——页面没报错，但什么也不显示。
常见错误写法包括：el.appendChild(template.content)、template.content.querySelector(...)（返回 null）、template.innerHTML = '...'（静默忽略）。
- 必须始终用
template.content.cloneNode(true)获取新副本 -
cloneNode(false)只克隆 fragment 本身，不带子节点，基本无效 - 克隆后才能安全调用
querySelector、addEventListener、setAttribute
表单字段 name 和 id 冲突怎么避
模板里写 <input name="email">，克隆 3 次就生成 3 个同名 input。表单提交时，FormData 只取最后一个值，后端收不到全部数据。
更隐蔽的问题是：label for="email" 会指向第一个匹配的 id="email"，其余 label 失效；document.getElementById('email') 也只返回首个节点。
立即学习“前端免费学习笔记（深入）”；
- 克隆后遍历所有表单控件：
instance.querySelectorAll('input, select, textarea') - 动态重设
name：比如el.setAttribute('name', `email[${index}]`)或el.setAttribute('name', `user[emails][${index}]`) - 同步更新
id和for属性：el.id = `email-${index}`，再改对应label的for - 避免在模板中写固定
id，只保留class或data-*作为定位依据
克隆后的 file input 为什么永远为空
这是浏览器强制的安全限制：<input type="file"> 克隆后 value 始终为 ""，且无法通过 JS 赋值还原。哪怕你 clone 前已选文件，clone 后也清空了。
这意味着不能靠克隆来“备份”用户已选的文件；也不能用克隆实现“添加附件行”后自动继承上一行的文件选择。
- 唯一可行路径：让用户每行单独点击
<input type="file">选择 - 若需多文件上传，改用单个
input[type="file"][multiple]+ 动态预览列表 - 克隆前可先读取当前文件（
input.files），但克隆体里的 input 仍需重新触发选择 - 不要尝试
cloneInput.files = originalInput.files—— 浏览器会拒绝并抛出 DOMException
样式和事件为什么没生效
<template> 内部的 <style> 默认不生效，内联 onclick 也不会绑定。这不是 bug，是规范行为：template 内容不解析、不执行、不渲染。
克隆后插入 DOM，样式才可能起作用，但前提是 style 标签没被隔离（比如没加 scoped），且没被全局 CSS 覆盖；事件则完全不会自动绑定。
- 样式必须外置：把
<style>移到<head>，或用document.head.appendChild(styleEl)注入 - 事件必须手动绑定：
clone.querySelector('button').addEventListener('click', handler) - 避免在 template 内写
<script>initDatePicker()</script>—— 它根本不会执行 -
<slot>在普通 template 中被忽略，只在自定义元素的 Shadow DOM 里有效
克隆后是否挂载决定 FormData 能否收集到值——未 append 到 document 的节点，即使有 name 和 value，new FormData(form) 也不会包含它。这点容易被忽略。
