原生<template>不能直接当组件用，因为它仅是浏览器提供的“离线DOM片段容器”，不渲染、不响应数据、不自动绑定事件，需手动克隆、挂载和实现数据绑定逻辑。
直接用 <template> 写声明式组件，不依赖框架也能跑起来 —— 但必须手动克隆、挂载、处理数据绑定，否则它就只是个“藏起来的 HTML 字符串”。
为什么 <template> 不能直接当组件用
<template> 元素本身不会渲染，也不会自动响应数据变化。它只是浏览器原生提供的“离线 DOM 片段容器”，DOM API（如 document.querySelector）能拿到它，但里面的内容不会出现在 document.body 中，也不参与事件流或样式计算。
常见错误现象：
- 写了
<template id="my-btn"><button class="btn">${text}/template>，但页面空白，控制台也没报错 - 手动
innerHTML = template.content.innerHTML，结果样式丢失、事件没绑定、${text}原样输出
根本原因：HTML 模板不解析 JS 表达式，也不执行任何绑定逻辑 —— 它不是模板引擎，只是 DOM 容器。
立即学习“前端免费学习笔记（深入）”；
手写声明式组件的最小可行路径
要让 <template> 真正“活”起来，得补三步：克隆结构 + 注入数据 + 挂载到真实 DOM。不需要 Vue/React，但需要你控制这三件事的时机和方式。
实操建议：
- 用
template.content.cloneNode(true)获取纯净副本，避免多次使用时节点被移走 - 数据注入别硬拼字符串，优先用
textContent/setAttribute替换占位符（如data-text），避开 XSS 风险 - 把组件逻辑封装成函数，比如
renderButton({ text: '提交', disabled: true })，返回 DocumentFragment - 如果要支持响应式更新，得自己监听数据变化（例如用
Proxy包一层对象），再触发重 render
示例片段（无框架）：
<template id="user-card">
<div class="card">
<h3 data-bind="name"></h3>
<p data-bind="email"></p>
</div>
</template>
<script>
function renderUserCard(data) {
const tpl = document.getElementById('user-card');
const frag = tpl.content.cloneNode(true);
frag.querySelectorAll('[data-bind]').forEach(el => {
const key = el.getAttribute('data-bind');
el.textContent = data[key] ?? '';
});
return frag;
}
document.body.appendChild(renderUserCard({ name: '张三', email: 'zhang@example.com' }));
</script>
和 Marko、Vue 这类声明式方案的关键区别
Marko 的 ${...}、Vue 的 {{ }} 能直接运行，是因为它们在构建阶段就把模板编译成了 JS 函数；而原生 <template> 没这层能力 —— 它只负责存结构，不负责解释逻辑。
这意味着：
- 你写的
${count}在<template>里就是纯文本，不会被求值 - 条件渲染（如
v-if或if="..."）必须靠 JS 手动控制appendChild/removeChild - 事件绑定不能写
onclick="handleClick()"在模板里（会全局作用域执行），得用frag.addEventListener(...)动态加 - 样式隔离？没有。CSS 仍走全局作用域，需靠 BEM、CSS Modules 或
scoped属性模拟
性能上，原生 <template> 启动快、无运行时开销，但每次更新都要重新克隆 + 遍历 + 绑定，复杂组件容易卡顿。
什么时候该坚持用原生 <template>，而不是上框架
适合场景很窄，但真实存在：
- 超轻量内嵌组件，比如 CMS 后台里一个可复用的「通知栏」，只改几个文本、不涉及交互逻辑
- 需要完全控制渲染时机的场景，比如 SSR 后端直出 HTML，前端只做微小 patch
- 已有大量静态 HTML 模板库，想复用结构但拒绝引入构建工具链
容易被忽略的一点：如果你开始给 <template> 加 watch、computed、slot、props 类型校验……那其实已经在重造轮子 —— 此时切换到 Marko 或 Lit 更省力，也更可靠。
