纯<template>标签本身不构成模块化架构，它只是静态容器；真正支撑模块化的是围绕它建立的可复用、可组合、可维护的JS实例化逻辑。
纯 <template> 标签本身不构成模块化架构，它只是个静态容器；真正能撑起模块化 Web 应用的，是围绕它建立的一套可复用、可组合、可维护的 JS 实例化逻辑——没有这层逻辑，<template> 就是废标签。
为什么直接写 <template id="card"> 不等于有了组件
浏览器解析时会跳过 <template> 内容，里面 <script> 不执行、<img src> 不加载、<input checked> 的状态也不保留。常见错误是把模板当 Vue 组件或 Web Component 用，结果 DOM 里啥也没有。更隐蔽的问题是：用 innerHTML = tmpl.innerHTML 填充后，表单控件（比如带 checked 的复选框）会丢失初始状态；用 cloneNode(true) 复制含 <script> 的片段，脚本也不会自动运行。
如何用 document.importNode() 安全克隆并注入数据
这是绕过 cloneNode() 缺陷的核心操作，尤其对含表单、<select> 或 Shadow DOM 的场景必不可少：
const tmpl = document.getElementById('card-template')-
const fragment = document.importNode(tmpl.content, true)—— 第二个参数true表示深克隆，保留所有状态和绑定 - 遍历
fragment.querySelectorAll('[data-bind]')找绑定点，例如data-bind="title"对应<h2>标签 - 对文本内容用
node.textContent = data.title，避免 XSS；对富 HTML 用node.innerHTML = data.content，但必须确保内容可信 - 最后用
container.appendChild(fragment)挂载，别用innerHTML覆盖已有结构，否则会清空事件监听器和用户输入
怎样让模板支持多次复用且不冲突
纯 <template> 没有属性监听、生命周期或封装能力，“传参”本质就是调用工厂函数时传入对象：
立即学习“前端免费学习笔记（深入）”；
- 模板内禁用硬编码
id，如id="card-1"—— 多次渲染会导致 ID 重复，破坏 CSS 选择器和getElementById - 用语义化
data-bind属性（如data-bind="author-avatar"），比靠 class 名查找更稳定、易重构 - 工厂函数（如
createCard({ title: 'Hello' })）应返回DocumentFragment，而非字符串，避免重复解析 - 如需后续更新，缓存首次生成的节点，只修改
textContent或dataset值，不重新克隆整个模板
什么时候该放弃 <template>，转向 Web Components
当你的模块开始需要样式隔离、属性响应、生命周期钩子或跨项目复用时，<template> 就到边界了：
-
attachShadow({ mode: 'open' })创建的 shadow root 是独立样式上下文，外部 CSS 不穿透，!important也无效——这不是 bug，是设计 - 宿主元素状态只能通过
:host([disabled])响应，slot 内容样式只能靠::slotted(p)有限透传，不能控制 margin 或 display -
customElements.define('site-card', class extends HTMLElement { ... })必须在constructor()中调用super()，DOM 操作要放在connectedCallback里，否则报错 - 如果项目已用构建工具，且需强封装性，
<template>+ JS 工厂函数适合轻量静态模块；Web Components 才是真正意义上的 HTML 模块化原生方案
真正容易被忽略的不是怎么写模板，而是怎么管理模板之间的依赖关系和数据流向——比如多个卡片共享同一份数据源时，谁负责触发重渲染？<template> 不提供答案，你得自己搭这套链路。
