<template>标签不能直接当组件用，因其内容被浏览器跳过解析、不渲染、不执行脚本、不加载资源，必须通过document.importNode(tmpl.content, true)克隆并手动填充数据后插入DOM。
<template> 标签本身不渲染、不执行脚本、不发起请求，是构建轻量级 HTML 模块化组件最直接的原生方案——但它不是“写完就能用”，必须配合 JS 实例化逻辑，否则只是静态占位符。
为什么<template>不能直接当组件用
浏览器遇到 <template> 会跳过其内容解析，DOM 中完全不可见；它不触发图片加载、不执行内联 <script>、也不解析 data-* 属性绑定。常见误操作是把它当 Vue 的 <template> 或 Web Component 的 <slot> 用，结果页面一片空白。
- 直接
innerHTML = template.innerHTML会丢失表单元素状态（如<input checked>的选中态） - 用
cloneNode(true)复制后插入，若含<script>或<style>，不会自动执行或生效 - 模板里写
{{title}}这类插值语法，纯 HTML + JS 不识别，必须手动替换
怎么安全克隆并填充<template>内容
核心是用 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"找到对应节点 - 填充数据：对文本节点用
node.textContent = data.title，对 HTML 内容用node.innerHTML = data.content（注意 XSS 风险） - 挂载：
container.appendChild(fragment)，不要用innerHTML覆盖已有结构
如何让<template>组件支持属性传参和复用
纯 <template> 没有生命周期或属性监听机制，所谓“传参”本质是调用工厂函数时传入对象，再由 JS 映射到 DOM 节点。它适合静态内容或低频交互场景。
立即学习“前端免费学习笔记（深入）”；
- 定义模板时用语义化
data-bind属性，而非 class 名（data-bind="author-name"比class="author"更易维护） - 工厂函数返回真实 DOM 节点，而非字符串，避免重复解析（
createCard({ title: 'Hello' })返回DocumentFragment） - 若需响应式更新，得手动实现：缓存首次生成的节点，后续调用时只更新
textContent或dataset值，不重新克隆 - 禁止在模板内硬编码 ID（如
id="card-1"），会导致多次使用时 ID 重复，影响 CSS 或 JS 查询
和 Web Components 相比，<template>方案的边界在哪
它不提供封装性、无样式隔离、无属性响应、无生命周期钩子——这些缺失不是缺陷，而是取舍：换来了零构建依赖、IE11+ 兼容、调试直观、热更新即改即见。
- 适合内部管理后台、文档站、原型页等 JS 逻辑简单、迭代快、无需 SSR 的场景
- 不适合需要主题切换、动态样式注入、焦点管理（如
:focus-visible）、或与第三方库深度集成的组件 - 若项目已用 Vite/Webpack，
<template>应作为兜底方案，优先走vite-plugin-html或html-loader的构建期注入路径 - Shadow DOM 的样式隔离代价是透传系统级媒体查询（如
@media (prefers-reduced-motion)）需显式处理，而<template>方案天然继承全局样式，省事也容易失控
真正难的不是写一个 <template>，而是决定哪些模块该用它、哪些该交给构建工具、哪些必须升级为 Custom Element——边界模糊处，往往就是后期维护成本飙升的起点。
