中自定义元素的connectedCallback不执行，因其内容处于文档片段状态，未接入主DOM树；需确保customElements.define()提前注册，并用document.importNode()克隆以保留节点类型。
为什么connectedCallback不执行
因为里的内容不会被浏览器解析为活跃 DOM 节点，所有子元素都处于“文档片段”状态，既不连接、也不触发任何生命周期回调。connectedCallback只在节点真正被appendChild()到主文档树时才运行，而本身是惰性的，它的content只是个容器。
常见错误现象：document.getElementById('card').content.cloneNode(true)插入页面——此时user-card确实进了 DOM，但它的connectedCallback仍可能不执行，原因有二：
- 如果
customElements.define('user-card', ...)还没执行，该节点始终是HTMLUnknownElement，根本不会尝试调用生命周期方法 - 若你用
innerHTML把template.content转成字符串再写入，等于重建节点，原始引用丢失，自定义行为彻底失效
实操建议：
- 确保
customElements.define()在任何被克隆前已同步完成（比如放在入口 JS 最顶部） - 用
document.importNode(template.content, true)而非innerHTML，保留节点类型和事件绑定 - 克隆后手动检查
el.constructor.name === 'UserCard'，确认不是HTMLUnknownElement
attributeChangedCallback监听不到属性变化？先看observedAttributes有没有写对
attributeChangedCallback不是自动监听器，它只响应static get observedAttributes()返回数组中明确列出的属性名，且必须与 HTML 中实际写的 attribute 名完全一致（包括大小写、连字符）。
典型误判场景：
-
observedAttributes里写的是['value']→ 没问题；但如果用了el.value = 'xyz'（property 赋值），不会触发回调 -
observedAttributes写了['dataUserId']或['userId']→ 不匹配，回调静默跳过 - 在
constructor里调this.setAttribute('data-user-id', '456')，但observedAttributes没包含'data-user-id'→ 依然不触发
实操建议：
- 所有监听项必须用字符串字面量，严格按 HTML attribute 写法：连字符分隔、全小写
- 首次渲染时，
connectedCallback里要主动调this.getAttribute('data-user-id')读初始值，因为 attribute 变更回调不会在初始化时补发 - property 和 attribute 同步需手动维护：设
set userId(val) { this.setAttribute('data-user-id', val); }
用
每次从克隆新节点，都等于新建一个实例，如果里面含addEventListener或setTimeout，又没清理机制，就会堆积。而disconnectedCallback不可靠，不能当唯一清理入口。
关键风险点：
- 克隆后的节点被
appendChild进 DOM，但没做任何清理注册，后续切换时仅靠removeChild无法释放定时器或 fetch 请求 - 多个克隆节点共用同一份事件处理函数，却没用
once: true或手动removeEventListener，导致点击一次触发多次 - 节点被移出 DOM 后，仍持有对闭包变量（如父组件引用）的强引用，GC 无法回收
实操建议：
- 所有异步操作（
fetch、setTimeout、requestAnimationFrame）必须配AbortSignal，并在connectedCallback中创建AbortController，存为实例属性 - 事件监听统一用
el.addEventListener('click', handler, { signal: this._abort.signal })，销毁时只调this._abort.abort() - 避免在
内联写onclick="doSomething()"，这类字符串 handler 无法被signal控制，也无法被removeEventListener精准移除
滚动列表里复用
模板复用不是简单地替换textContent，而是要在结构稳定前提下做最小变更。一旦节点池里某个克隆体的 DOM 结构被动态增删（比如某次渲染加了个，下次又删了），再复用时就会因结构错位导致querySelector取错位置、class 名覆盖混乱、CSS 选择器失效。
真实踩坑场景：
- 用
el.innerHTML = '覆盖内容 → 清空整个子树，所有事件监听、Canvas 上下文、第三方库实例全丢' + data.title + '' - 复用节点时只改
dataset.id，但忘了重置classList，旧的is-active类残留，视觉状态错乱 - 模板里用了
assignedNodes()，导致上一轮插槽内容还在
实操建议：
- 初始化时就固定结构：子元素 class 名、层级、数量全部写死，只允许改
textContent、src、dataset、style等可变字段 - 复用前强制重置：
el.className = 'my-card'; el.innerHTML = '';再逐字段赋值，比innerHTML全量替换更可控 - 带
el.querySelectorAll('slot').forEach(s => s.textContent = '')
getContext引用、第三方库挂载的实例、甚至IntersectionObserver的观察句柄，它们不会随removeChild自动消失，得你亲手断掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
