克隆 template 后 data-* 属性不会自动更新，需手动用 setattribute() 设置；表单 id/name 必须重置以避免冲突；dataset 读写应统一规范，命名须严格 kebab-case。
克隆 template 后 data-* 属性不会自动更新
直接 cloneNode(true) 一个 template，里面所有 data-* 属性值还是原始模板写死的字符串，比如 <template data-id="1"></template> 克隆 10 次，每个实例的 dataset.id 都是 "1"，不是你期望的 "1"、"2"、"3"……这是因为 dataset 是只读映射，克隆只是复制 DOM 结构，不触发任何数据绑定逻辑。
必须手动遍历克隆后的节点，用 setAttribute() 覆盖每项的 data-* 值：
- 先拿到克隆后的根元素：
const item = template.content.cloneNode(true).firstElementChild; - 再按需设置：
item.setAttribute('data-index', String(i));、item.setAttribute('data-uuid', crypto.randomUUID().slice(0, 6)); - 别用
item.dataset.index = i—— 这不会同步到 DOM 属性，DevTools 里看不到变化
克隆后表单控件 id/name 冲突必须重置
模板里写 <input id="title" name="title"> 很常见，但克隆 5 次就产生 5 个相同 id="title" 的 input，这违反 HTML 规范，导致 document.getElementById('title') 只返回第一个，label[for="title"] 全部指向它，用户点击 label 时永远只聚焦第一个输入框。
每次克隆后必须重写所有含 id 或 name 的表单控件：
- 用递增索引或
crypto.randomUUID().slice(0, 6)生成唯一 ID（不用Math.random()，易重复） -
input.id = 'title-' + i、input.name = 'title[' + i + ']' - 同步更新对应
label的for属性：label.setAttribute('for', input.id) - 别漏掉
textarea、select、fieldset等也带id/name的元素
dataset 和 getAttribute 混用会状态错乱
写入时用 el.dataset.foo = 'bar'，读取时却用 el.getAttribute('data-foo')，结果往往不一致——前者只改 JS 内存缓存，后者读的是真实 DOM 属性。尤其在调试时用 el.outerHTML 查看，发现属性根本没变。
统一规则更安全：
- 读取优先用
el.dataset.xxx（自动驼峰、语义清晰） - 写入一律用
el.setAttribute('data-xxx', value)（确保 DOM 更新、DevTools 可见） - 删除用
el.removeAttribute('data-xxx')，比delete el.dataset.xxx更可靠 - 判断是否存在：
'xxx' in el.dataset，而不是el.dataset.xxx !== undefined（空字符串也会是undefined）
data-* 命名错误导致 dataset 读不到
写成 data-userId、data_user_id、data-UserID，浏览器解析时直接忽略，el.dataset.userId 返回 undefined，且 DevTools 的 Elements 面板里都看不到这个属性——它压根没进 DOM 树。
合法命名只有一种形式：全小写 + 连字符：
- ✅
data-api-url→el.dataset.apiUrl - ✅
data-2024-config→el.dataset["2024Config"]（数字开头必须方括号访问） - ❌
data-apiUrl、data:api_url、data-API-URL—— 全部无效 - 服务端模板拼接时，务必做 kebab-case 转换，不能直接把 JSON key 原样塞进去
克隆后 data-<em></em> 不是“活”的，它和 innerHTML 一样只是静态快照；真正麻烦的不是怎么克隆，而是克隆完那一堆要重置的 id、name、data- 和 for 属性——漏掉任意一个，交互或可访问性就会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
