必须用template.content.cloneNode(true)克隆，因template内容存于离线DocumentFragment中，直接innerHTML或appendChild会丢失事件、触发ID冲突或静默失败；克隆后须重设id/name并重新绑定事件。
为什么不能直接插入DOM就用
因为浏览器解析<template></template>时会跳过其内容，不渲染、不执行脚本、不加载图片，它只是个“冷冻区”。直接innerHTML = tmpl.innerHTML或appendChild(tmpl)，结果是空白或状态丢失——比如<input checked>的勾选态、<select></select>的当前选项全失效。
常见误操作包括：把<template></template>当Vue的<template></template>用，或当成Web Component的<slot></slot>容器；还有人用cloneNode(true)复制后插入，但含<script></script>或<style></style>的节点不会自动执行或生效。
- 必须用
document.importNode(tmpl.content, true)克隆，才能保留表单控件状态和Shadow DOM兼容性 - 模板内写
{{title}}这类插值，原生HTML不识别，得手动遍历data-bind属性替换 - 禁止在模板里硬编码
id（如id="card-1"），多次实例化会导致ID重复，破坏CSS选择器和getElementById逻辑
如何让组件支持参数传入和复用
纯<template></template>没有属性监听、没有生命周期，所谓“传参”本质是调用JS工厂函数时传入一个数据对象，再映射到DOM节点。它适合静态内容或低频交互场景，不适合高频响应式更新。
- 模板中用语义化
data-bind="author-name"，比class="author"更易维护、不易被CSS覆盖干扰 - 工厂函数应返回
DocumentFragment，而非拼接字符串，避免重复HTML解析开销 - 如需后续更新，应缓存首次生成的节点，只重置
textContent或dataset值，不重新克隆整个模板 - 所有绑定点必须显式声明，比如
<h3 data-bind="title"></h3>，不能依赖隐式类名匹配
纯HTML+CSS组件库必须守住的三条线
没框架兜底时，样式泄漏、结构不可移植、主题无法切换，是默认状态。命名空间、设计令牌、自闭合结构，缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 类名强制前缀：
c-button、c-card__footer，禁用.header或.content这种泛化名 - CSS变量统一管理：
--c-space-md、--c-color-primary，禁用margin: 8px或!important - HTML结构必须独立可复制：粘贴一段
<div class="c-card">...进任意页面，能立刻渲染且不污染全局样式 <li>按钮必须用<code><button></button>，不用<div role="button">——否则键盘焦点、表单提交、无障碍支持全部失效 <h3>静态托管环境下怎么加载HTML组件片段</h3> <p>GitHub Pages、Netlify等不解析<code><?php include ?>或@@include，服务端include方案直接失效。靠JS加载是唯一可行路径，但要注意CORS和缓存陷阱。- 首选：
<template id="c-nav"></template>包裹结构，JS中用document.getElementById('c-nav').content.cloneNode(true)插入 - 次选：用
fetch('./components/c-nav.html')动态加载，但需配置服务器允许跨域，且加cache: 'no-cache'防旧版本缓存 - 绝对避免：
innerHTML = '<div>...</div>'拼接字符串——XSS风险高，且破坏表单状态和事件绑定 - 所有组件HTML文件路径必须相对一致，建议统一放在
/components/目录下，避免路径错乱导致404
真正难的不是写出一个能跑的模板，而是让每个
<template></template>在不同上下文里保持行为一致：状态不丢、样式不漏、ID不撞、加载不崩。这些约束不是限制，是提前把坑标出来——你绕不开，但可以一眼认出它在哪。 - 首选：
