必须用template.content.cloneNode(true)克隆，因template内容存于离线DocumentFragment中，直接innerHTML或appendChild会丢失事件、触发ID冲突或静默失败；克隆后须重设id/name并重新绑定事件。

为什么

因为浏览器解析时会跳过其内容，不渲染、不执行脚本、不加载图片，它只是个“冷冻区”。直接innerHTML = tmpl.innerHTML或appendChild(tmpl)，结果是空白或状态丢失——比如的勾选态、的当前选项全失效。

常见误操作包括：把当Vue的用，或当成Web Component的容器；还有人用cloneNode(true)复制后插入，但含<script></script>或的节点不会自动执行或生效。

• 必须用document.importNode(tmpl.content, true)克隆，才能保留表单控件状态和Shadow DOM兼容性
• 模板内写{{title}}这类插值，原生HTML不识别，得手动遍历data-bind属性替换
• 禁止在模板里硬编码id（如id="card-1"），多次实例化会导致ID重复，破坏CSS选择器和getElementById逻辑

如何让

纯没有属性监听、没有生命周期，所谓“传参”本质是调用JS工厂函数时传入一个数据对象，再映射到DOM节点。它适合静态内容或低频交互场景，不适合高频响应式更新。

• 模板中用语义化data-bind="author-name"，比class="author"更易维护、不易被CSS覆盖干扰
• 工厂函数应返回DocumentFragment，而非拼接字符串，避免重复HTML解析开销
• 如需后续更新，应缓存首次生成的节点，只重置textContent或dataset值，不重新克隆整个模板
• 所有绑定点必须显式声明，比如
  ，不能依赖隐式类名匹配

纯HTML+CSS组件库必须守住的三条线

没框架兜底时，样式泄漏、结构不可移植、主题无法切换，是默认状态。命名空间、设计令牌、自闭合结构，缺一不可。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 类名强制前缀：c-button、c-card__footer，禁用.header或.content这种泛化名
• CSS变量统一管理：--c-space-md、--c-color-primary，禁用margin: 8px或!important
• HTML结构必须独立可复制：粘贴一段
  ...进任意页面，能立刻渲染且不污染全局样式
• 按钮必须用，不用
  ——否则键盘焦点、表单提交、无障碍支持全部失效

  静态托管环境下怎么加载HTML组件片段

  GitHub Pages、Netlify等不解析或@@include，服务端include方案直接失效。靠JS加载是唯一可行路径，但要注意CORS和缓存陷阱。

  • 首选：包裹结构，JS中用document.getElementById('c-nav').content.cloneNode(true)插入
  • 次选：用fetch('./components/c-nav.html')动态加载，但需配置服务器允许跨域，且加cache: 'no-cache'防旧版本缓存
  • 绝对避免：innerHTML = '
    ...
    '拼接字符串——XSS风险高，且破坏表单状态和事件绑定
  • 所有组件HTML文件路径必须相对一致，建议统一放在/components/目录下，避免路径错乱导致404

  真正难的不是写出一个能跑的模板，而是让每个在不同上下文里保持行为一致：状态不丢、样式不漏、ID不撞、加载不崩。这些约束不是限制，是提前把坑标出来——你绕不开，但可以一眼认出它在哪。