标签内容不渲染、不执行脚本、不触发事件，必须通过javascript克隆并插入dom后手动绑定事件才能交互；其本质是惰性dom片段仓库，非预设组件。
HTML模板本身不提供交互能力，它只是定义结构的静态骨架——所有点击、输入、状态切换都必须靠 JavaScript 驱动，模板只负责把可操作的节点（如 button、input、div）按语义和层级组织好。
为什么直接写 <template></template> 标签不会自动渲染或响应事件
<template></template> 是浏览器原生的惰性容器，它的内容不会被解析、不参与 DOM 渲染、不执行脚本、不触发任何事件。常见错误是把它当“预设组件”直接插入页面后期待自动生效。
- 写
<template id="item"><button class="delete">删</button></template>后，document.querySelector(".delete")查不到——因为内容还没被克隆进 DOM - 即使手动用
content.cloneNode(true)插入，新节点也默认没绑定事件，需重新调用addEventListener - 模板内写的
onclick="handler()"不会生效：内联 handler 在克隆时被剥离，且违反分离原则
<template></template> 和 <script type="text/html"></script> 的实际差异
两者都用于存放未激活的 HTML 片段，但行为完全不同：
-
<template></template>是标准 DOM 元素，支持content属性访问其文档片段，兼容性好（IE 不支持，但现代项目基本不考虑） -
<script type="text/html"></script>是 hack 方式，内容纯文本，需用innerHTML解析，易 XSS（若未转义），且无法直接获取子元素引用 - 性能上：
<template></template>内容不解析、不布局、不绘制，开销几乎为零；<script></script>方式需字符串解析 + DOM 构建，略重
在 Vue/React 等框架中，HTML 模板的实际角色是什么
框架里的“模板”（如 Vue 的 <template></template> 块、React 的 JSX）本质是语法糖，最终都编译成 JavaScript 渲染函数，不是浏览器原生 <template></template> 标签。
- Vue 单文件组件中的
<template></template>会被vue-loader编译为render函数，依赖响应式系统驱动更新 - React 的 JSX 经 Babel 转为
React.createElement()调用，由虚拟 DOM 对比决定真实 DOM 如何 patch - 它们都不依赖浏览器
<template></template>的惰性机制，而是用 JS 控制整个生命周期：挂载、更新、卸载、事件绑定
真正容易被忽略的是：模板结构是否利于后续 JS 操作。比如用 <div class="item" data-id="123"> 而非 <code><div id="item-123">，前者更易批量查询与解耦；又比如给交互区域加 <code>role="button"，既支持键盘操作，也方便自动化测试定位。结构设计不是“写完就行”，它决定了交互逻辑的扩展成本和稳定性。
