标签不触发渲染，需克隆content后插入；直接innerhtml操作会丢失节点引用和事件绑定，且导致id冲突、focus失效等问题。
Template 标签本身不触发渲染，必须手动克隆后插入
<template></template> 是纯声明式容器，浏览器解析时跳过其内容，既不执行脚本、不加载图片，也不创建 DOM 节点。这意味着你不能直接用 document.querySelector('template').innerHTML 获取“已激活”的结构——它返回的只是原始 HTML 字符串，里面的 <slot></slot>、绑定表达式（如 Vue/React 模板）或事件监听器全都不生效。
正确做法是调用 content.cloneNode(true) 获取文档片段（DocumentFragment），再用 append() 或 appendChild() 插入目标位置：
const tmpl = document.querySelector('#item-template');
const instance = tmpl.content.cloneNode(true);
document.getElementById('list').append(instance);
常见错误：直接 innerHTML += tmpl.innerHTML —— 这会把模板当普通字符串拼接，丢失所有节点引用和事件绑定能力，且可能触发多次解析开销。
动态填充 template 实例需避开 innerHTML，优先操作克隆后的节点树
从 template.content 克隆出的节点是真实 DOM 对象，可直接遍历修改。用 innerHTML 覆盖会销毁已有节点引用，导致后续无法控制或更新。
- ✅ 推荐：用
querySelector定位占位元素，再设textContent或value - ✅ 推荐：对表单项用
input.value = data.value，比重写innerHTML更安全、更高效 - ❌ 避免：对克隆体执行
el.innerHTML = '<span>xxx</span>'，尤其当内部有<script></script>或已绑定事件时
例如模板含 <button class="delete"></button>，克隆后应直接 btn.addEventListener('click', handler)，而非靠字符串注入事件逻辑。
多个 template 复用时注意 id 冲突与事件监听器泄漏
<template></template> 内若含 id 属性（如 <div id="modal-root">），批量克隆后会导致页面出现重复 id，破坏 <code>document.getElementById 行为，并影响 ARIA 关联（如 aria-labelledby）。
- 务必移除或动态重写克隆体中的
id属性：el.removeAttribute('id')或el.id = `item-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` - 若为每个实例绑定独立事件，记得在销毁前调用
removeEventListener，或使用事件委托避免监听器堆积 - 注意
<template></template>不会阻止外部 CSS 作用于其内容，但样式作用域需靠:scope或 CSS Modules 手动隔离
template + contenteditable 场景下 focus 管理容易失效
克隆含 contenteditable="true" 的模板后，新节点默认未聚焦，且 focus() 可能被浏览器忽略（尤其在异步插入后）。这不是 bug，而是浏览器对非插入即激活节点的策略限制。
解决方式分两步：
- 确保节点已挂载到 DOM：用
requestAnimationFrame(() => el.focus())或el.addEventListener('DOMNodeInserted', () => el.focus(), { once: true }) - 若需光标定位到末尾，得手动创建
Range和Selection，el.focus()本身只激活元素，不控制光标位置
这个细节常被忽略——看似“模板复用成功”，实际用户每次都要手动点进编辑区，体验断裂就发生在这一毫秒延迟里。
