<template>无生命周期，仅作静态内容存储；响应式需手动实现；自定义元素才是原生生命周期入口；disconnectedCallback不可靠，需配合beforeunload等全局事件；节点池化要求结构固化。
纯 <template> 没有生命周期，别指望它自动响应属性变化
很多人误以为把 HTML 包进 <template> 就能获得类似 Vue 或 React 的响应式更新能力。事实是：<template> 只是浏览器的“存储盒”，内容不渲染、不执行脚本、不触发任何钩子——它连 DOM 都不算，更谈不上生命周期。
所谓“传参”或“复用”，本质是你自己写 JS 工厂函数，比如 renderPreview(data)，再把 data 映射到克隆出来的节点里。它适合静态内容（如弹窗模板、错误提示片段），但不适合需要频繁响应状态变更的交互组件。
- 写
<template id="card"><div class="card">{{title}}</div></template>→ 无效：{{title}}不会被解析，只是纯文本 - 想靠
el.content.querySelector('input').value = data.value更新？可以，但必须手动做，且无 diff、无批量、无回滚 - 如果组件内含
<canvas>或定时器，从<template>克隆后，你得自己初始化上下文、重绑事件、重设 timer ID —— 浏览器不会帮你保留任何状态
customElements.define() 才是原生生命周期的唯一入口
真正能管理生命周期的，只有自定义元素（Custom Elements）。<template> 可以作为它的内部模板来源，但不能替代它。
常见错误是把 <template> 当成组件主体直接插入页面，结果发现 connectedCallback 从不触发、属性监听失效、销毁逻辑完全丢失。
立即学习“前端免费学习笔记（深入）”；
-
customElements.define()必须在 HTML 解析前同步执行；否则遇到<user-card>标签，浏览器立刻按HTMLUnknownElement处理，后续注册无效 - 所有生命周期方法（
connectedCallback、disconnectedCallback）都只对类实例生效，跟<template>无关 - 正确模式：
<template id="user-card-tpl">...</template>+class UserCard extends HTMLElement { ... }+customElements.define('user-card', UserCard)
为什么 disconnectedCallback 不可靠，以及怎么补救
disconnectedCallback 看似是清理出口，但它根本无法覆盖所有节点移除场景：用户关页、标签页冻结、强制 kill 进程时，它静默跳过；手动调用 el.remove() 后，节点脱离 DOM，但引用还在，定时器和事件监听器照常运行，内存泄漏就此发生。
真正的精细化管理，必须双保险：
- 在
disconnectedCallback里清理可预测的资源：清除this._timer、removeEventListener、disconnect MutationObserver - 但关键逻辑（如 Canvas 清空、WebSocket 关闭、第三方 SDK 卸载）必须同时绑定到
beforeunload或pagehide全局事件上 - 更稳妥的做法：所有副作用都带“可撤销句柄”，例如
this._abort = new AbortController()，销毁时统一调用this._abort.abort()
高频切换场景下，<template> + 节点池比重建快，但结构必须固化
每秒滚动刷新十几次的大屏编辑器里，靠 template.content.cloneNode(true) + appendChild 是可行的，但前提是节点结构绝对稳定——不能依赖 JS 动态增删子元素，否则复用时字段错位、事件绑定错乱、Canvas 上下文丢失。
实操要点：
- 初始模板中写死全部 class 名、
data-*属性、子元素层级，例如：<div class="card-header"><h3 data-field="title"></h3></div> - 复用时只改
textContent、src、dataset.xxx等字段，绝不调用innerHTML = ''或removeChild - 用
Map缓存节点，key 是唯一dataset.id；滚出视口时设style.display = 'none'并存入池，而不是销毁 - 禁止在模板里写
v-if类逻辑；条件渲染由 JS 控制 class 切换或hidden属性，而非删节点
复杂点不在怎么写，而在怎么守住结构边界——一旦允许动态 DOM 变更，池化就退化为内存泄漏温床。
