connectedcallback 未触发主因是节点未首次插入 active dom 树：customelements.define() 未执行、动态创建后未 appendchild、框架/innerhtml 插入绕过原生流程、shadow dom 内部插入无效。
connectedCallback 为什么没触发？别怪浏览器，先查挂载路径
自定义元素的 connectedCallback 只在节点**首次插入 active DOM 树**时执行，不是标签一写就调，也不是 new 实例就触发。常见失效场景：
-
customElements.define()还没执行，HTML 里就写了<user-card></user-card>—— 浏览器当未知标签静默忽略，回调永不会来 - 动态创建后没
appendChild()或insertAdjacentElement()，只document.createElement('user-card')不算挂载 - 用
innerHTML或 React/Vue 等框架插入，它们走的是内部渲染路径，绕过原生 DOM 插入流程，connectedCallback不触发 - Shadow DOM 内部插入该元素，它只响应当前文档主树的挂载，不认子树里的“挂载”
disconnectedCallback 不是保险箱，清理逻辑不能全押它
disconnectedCallback 是清理资源的**主要时机但不可靠**：页面刷新、关闭 tab、后台标签页冻结时，浏览器可能直接释放上下文，跳过此回调。真实限制比文档写的更严：
- 它只在元素被显式移除（如
removeChild()、el.remove()）时大概率触发 - 滚动中反复
remove()+appendChild()已挂载过的节点，disconnectedCallback不会重复执行 —— 因为节点没真正“断连”，只是换了个父容器 - IE11 和旧 Edge 中，
remove()不自动解绑事件，必须显式调用removeEventListener()
所以清理逻辑要双保险：在 disconnectedCallback 里做常规释放，同时在组件主动切换前手动清资源（比如播放器 player.dispose()、Canvas ctx.clearRect()）。
DOM 节点复用池怎么建？别用数组，用 Map + dataset.id
大屏或高频刷新场景下，每帧都 createElement() + removeChild() 会导致 GC 压力飙升、layout 时间暴涨。正确做法是把节点当“可擦写的白板”，不销毁、只隐藏+复写：
- 缓存必须用
Map，不用数组——避免索引漂移导致数据错位；键必须是唯一dataset.id，且初始化时就写死结构（固定 class、子元素 class 名） - 回收时设
el.style.display = 'none'，不detach，然后存入nodePool.set(el.dataset.id, el) - 复用时先
nodePool.get(id)，存在则el.style.display = ''，再批量更新textContent、dataset、src等字段；严禁在复用时增删子节点 - 池化工厂函数里，
recover()必须清空textContent和innerHTML，否则残留内容会在下次create()后意外显示
Fragment 切换时 DOM 残留怎么破？状态类和事件绑定得手动管
Android Fragment 或 Web 中模拟 Fragment 的切换（比如 Tab 切换、路由切换），常因 DOM 残留引发内存泄漏或样式错乱。关键点不在“切”，而在“切之前清”：
- 状态类别靠
element.className = 'active'赋值——它会覆盖全部类名；改用element.classList.add()/remove()，或服务端只输出基础类，客户端注入动态状态类 - 事件监听器必须在切换前显式
removeEventListener()，尤其注意定时器、resize 监听、WebSocket 连接等长生命周期资源 - Canvas、WebGL、video 元素需手动
ctx.clearRect()、gl.deleteTexture()、player.dispose()，不能指望disconnectedCallback或框架卸载钩子 - 如果用了自定义元素，切换前应主动调用其暴露的
destroy()方法（如有），而不是等浏览器回调
复杂点在于：节点是否真被移除，不取决于你调没调 remove()，而取决于它是否还在 active DOM 树里；容易被忽略的是，滚动、虚拟列表、Tab 缓存这些机制会让节点“看似消失”，实则仍活着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
