所有html属性值必须用双引号包裹，data-*属性是唯一合法自定义载体，template克隆比innerhtml快2–3倍但需重置id和事件，模板字段名大小写必须严格匹配数据结构。
模板引擎不自动保证 HTML 合法性，引号缺失会导致解析截断
模板引擎本身不校验生成的 HTML 是否符合规范，src=logo.png 这类无引号写法在浏览器中可能“看起来正常”，但一旦进入 SSR、Webpack 构建或 CI 校验流程，就会触发 Attribute value must be quoted 错误。真实故障常出现在：动态拼接 class="header-2026" 时漏掉引号，结果被截成 class=header-，后续样式和 JS 选择器全部失效。
- 所有属性值必须用双引号包裹，包括
data-active="true"、id="user-123" - 避免单引号混用，尤其在 JS 模板字符串中：
`<div class="${cls}">` 容易因嵌套引号出错<li>服务端模板（如 Jinja2、Freemarker）需配置 autoescape，默认开启可防 XSS，但不能替代引号规范</li> <h3>data-* 属性是唯一合法自定义载体，硬编码 uid 或 type 会埋雷</h3> <p>直接写 <code>uid="abc123"或component-type="card"看似省事，实则违反 W3C 规范，且在大型项目中极易与未来 HTML 原生属性冲突。JS 中读取el.dataset.userId依赖的是标准解析逻辑，非data-前缀的属性无法被dataset映射，也逃不过html-validate等工具报错。- 必须以
data-开头，且后接字母或下划线，禁用data_、data:、DATA-ID - 避免数字开头：
data-1st-item在部分旧解析器中会失败，改用data-first-item - 驼峰转换自动发生：
data-user-id="x"→el.dataset.userId，无需手动处理
template 标签克隆比 innerHTML 快 2–3 倍，但事件和 ID 需手动重置
template.content.cloneNode(true)是唯一安全的 DOM 插入方式，它跳过 HTML 解析阶段，复用已解析的节点树。而innerHTML = str每次都要走完整解析→构建→布局流程，数据量稍大就明显卡顿。但克隆体不带事件监听器，也不重置id，直接插入会导致表单冲突或事件丢失。- 克隆后必须调用
clone.querySelector('[data-placeholder]')定位填值，别用正则全局替换{{id}} -
id属性要重设，否则label[for]和document.getElementById全部错乱 - 事件需重新绑定：
clone.addEventListener('click', handler)，不能依赖原模板里的内联onclick
占位符大小写与字段名必须严格一致，静默失败不报错
Handlebars、VTemplate 等引擎对字段名大小写极其敏感。
{{user_name}}和{{userName}}是两个完全不同的键；传入{ userName: "Alice" }却写{{user_name}}，结果就是空白，控制台零提示。更隐蔽的是嵌套对象导出：模板里写{{profile.email}}，但数据是{ profile: { email: "a@b.c" } }才有效，少一层就失效。- 检查
document.getElementById("tpl").innerHTML是否为空——DOM 可能未加载完或 ID 拼错 - 模板中未闭合的
{{或多余}会让Handlebars.compile()静默返回错误函数 -
{{#if user}}对null、undefined、""全部判为 falsy，传{ user: null }就不渲染
模板引擎不会替你守规矩，它只负责把数据塞进字符串。真正决定代码质量的，是你是否坚持双引号、
data-前缀、大小写精确匹配这些细节——它们不出现在运行时错误里，却会在 SSR 构建失败、CI 报警、协作混乱时集中爆发。 - 必须以
