应使用 template 标签定义结构而非 innerhtml 拼接，因其可避免 xss、属性丢失等问题；正确用法是 template.content.clonenode(true) 获取 documentfragment；需注意克隆后重设 id、同步 label for 与 input id、用 textcontent/setattribute/显式赋值填充数据；样式应分层复用修饰类；template 必须置于 head 或 body 最外层。
直接用 template 标签定义结构，别写死 HTML 字符串
硬编码拼接 HTML 字符串（比如 innerHTML = '<div class="card">...</div>'）看似快，但极易出错：XSS 风险、属性丢失（如 checked、selected）、嵌套标签错位、自闭合标签（<img>、<input>）被截断。浏览器把 template 内容存在只读的 content 属性里，innerHTML 读出来是空的——这是设计使然，不是 bug。
正确做法只有一条：template.content.cloneNode(true)。它返回一个干净、独立、结构完整的 DocumentFragment，样式未生效、脚本未执行、图片未加载，但所有节点关系、文本、属性都原样保留，后续可安全操作。
常见翻车点：
- 直接
appendChild(template.content)—— 第二次调用时content就空了，因为内容被“搬走”了 - 克隆后没重设
id属性（如el.id = 'card-' + Date.now()），导致多个实例 ID 冲突，document.getElementById()返回不可预期结果 - 模板里有
<label for="email"></label>，克隆后没同步更新for和对应input#email的id，点击 label 不聚焦
填充数据必须用语义化 API，不是 innerHTML 拼接
模板是结构容器，不是字符串占位器。用户输入、API 返回的纯文本内容，一律走 textContent；属性变更（src、href、data-*）用 setAttribute()；表单控件初始值不能靠写死 value="xxx"，得显式赋值 el.value = userData.phone —— 否则克隆后实际值仍是空。
典型错误：
- 用
innerHTML填充富文本时没做转义，直接插入用户输入 → XSS 漏洞 - 改图片地址写成
el.src = url而非el.setAttribute('src', url)，在 Safari 15.4 之前或某些旧环境里图片不触发加载 - 把
dataset当隐藏字段塞 JSON 字符串，不如直接存上下文标识：card.dataset.userId = '123'，更轻量、更语义化
样式复用靠类名组合，不是为每个变体新建 CSS 规则
一个按钮有蓝底白字、红底白字、小号、大号、禁用态……如果每个都写独立类（.btn-red、.btn-lg、.btn-disabled），CSS 文件会指数级膨胀。真正可维护的做法是分层：基础类（.btn）定义共性，修饰类（.btn--red、.btn--lg）只覆盖必要属性。
关键约束：
- 扩展类名必须带
--修饰符或前缀（如btn--primary），避免和基础类语义混淆 - 避免用 ID 或深度嵌套选择器（如
#header .nav-link），它们锁死复用范围，且特异性过高 - 如果某类扩展只在一个地方用，说明它还没达到“可复用”标准，先别进公共 CSS
- 所有页面统一按顺序引入：
<link rel="stylesheet" href="/css/base.css">→<link rel="stylesheet" href="/css/components.css">→<link rel="stylesheet" href="/css/layout.css">，顺序乱了变量未定义或覆盖失效
template 标签位置不能嵌套，必须在
template 必须作为顶层元素存在，不能包在 <div>、<code><section></section> 或其他组件内部。一旦被包裹，部分浏览器（尤其是 Safari 15.4 之前）会丢弃其 content，导致 template.content 是个空 DocumentFragment，克隆后什么都没有。
正确写法只有两种：
- 放在
里（推荐，语义清晰、加载早） - 放在
最外层，紧贴上方（兼容性最稳）
任何中间层级的包裹，都是在赌浏览器实现一致性 —— 实际项目里，这个赌注基本都会输。
