<template>标签不是离线结构预留工具，而是生成只读DocumentFragment的离线容器；必须用content.cloneNode(true)克隆后手动填值、绑定事件并插入DOM，不渲染、不执行、不解析，也不参与Service Worker缓存策略。
<template> 标签在离线 Web 应用中不是“预留结构”的工具，它只是把 HTML 片段变成一个不解析、不渲染、不加载资源的 DocumentFragment——你得靠 JS 显式克隆、填值、绑定、插入，才能让它变成真实 DOM。
为什么 template 不能直接用于离线结构预留
离线应用常依赖 Service Worker 缓存静态资源，但 <template> 本身不触发任何网络请求或脚本执行，也不参与缓存策略。它只是 HTML 解析器的一个“暂停点”：内容被挂到 content 属性上，但不会出现在 document.body.children 中，也不会被 CSS 选择器匹配，更不会触发 <img src="..."> 的加载或 <script> 的执行。
- 浏览器不会为
<template>内的<img>发起请求，即使你离线时想预加载图，它也压根没机会触发 -
<script>标签在<template>里完全被跳过，console.log不会输出，函数不会定义 - 你不能靠给
<template>加 class 或 id 来用 CSS 控制其内容样式——它不在渲染树里
template.content.cloneNode(true) 是唯一合法取值方式
template.innerHTML 永远返回空字符串；template.children 是空的 NodeList；template.firstElementChild 是 null。所有真实子节点都只存在于 template.content 这个只读的 DocumentFragment 上。
- ✅ 必须写
template.content.cloneNode(true)才能得到可操作副本（深克隆） - ❌ 不能用
template.innerHTML = '...'修改模板内容（content是只读的） - ⚠️ 克隆后得到的是初始 HTML 状态：比如
<input value="default">克隆出来还是value="default"，和用户当前输入无关
离线场景下必须手动初始化表单与事件
离线应用常需动态生成表单、卡片或弹窗，但 <template> 不带任何运行时状态。克隆后所有交互元素都处于“出厂设置”：
立即学习“前端免费学习笔记（深入）”；
-
<input>、<textarea>、<select>的value/checked/selected都是定义时的值，不是用户输入后的值 - 克隆节点不继承事件监听器，
onclick属性无效，必须重新addEventListener或改用事件委托 - 若需保留默认值（如搜索框 placeholder 或选中项），要显式赋值：
clone.querySelector('input').value = 'search...'
template 必须放在 body 或 head 直接子级才有效
如果把 <template> 塞进 <table>、<div> 或 <script> 里，浏览器会自动把它提到最近的合法父容器（通常是 <body>）下，甚至可能丢弃部分内容——结构就毁了。
- ✅ 正确：
<body><template id="modal">...</template></body> - ❌ 错误：
<div id="app"><template>...</template></div>→ 模板会被移出<div> - ⚠️ IE 完全不支持
<template>，离线应用若需兼容，得降级为字符串模板或<script type="text/template">
真正容易被忽略的是：template 不是“待激活组件”，它连“组件”都不是——没有生命周期、没有响应式、没有插值语法。所谓“离线可用”，只意味着它的 HTML 字符串能被 Service Worker 缓存下来；但能不能用、怎么用、用成什么样，全看 JS 是否在离线状态下仍能正确克隆、填值、绑定、插入。
