connectedCallback未执行是因为元素未首次插入document主树；它只在首次挂载时触发，而非标签书写、实例化或innerHTML插入即运行，常见原因包括customElements.define()滞后、未appendChild、Shadow DOM内插入或框架绕过原生流程。
connectedCallback 为什么没执行？先确认元素真挂载了
它只在元素**首次插入 document 主树**时触发，不是标签一写就跑，也不是 new 实例就调。常见误判场景：
-
innerHTML = '<my-el></my-el>'插入 → 不触发，浏览器走字符串解析路径，绕过生命周期 - SSR 输出的
<my-el data-id="42"></my-el>，必须等 HTML 解析完成并 append 到document.body后才触发 -
document.createElement('my-el')单独调用 → 不触发；必须紧接着parent.appendChild(el) - Vite 动态导入中注册：如果
customElements.define()晚于 HTML 解析，该节点永久按HTMLUnknownElement处理
attributeChangedCallback 没反应？检查 observedAttributes 声明
这个钩子不会自动监听任意属性，必须显式声明要观察的属性名，且大小写、连字符必须与 HTML 中完全一致。
- 必须写静态 getter：
static get observedAttributes() { return ['data-id', 'disabled']; } - HTML 写
<my-el data-user-id="123"></my-el>，就得监听'data-user-id'，不能简写为'userId' - 直接赋值
el.disabled = true是 property 操作，不触发；只有el.setAttribute('disabled', '')或 HTML 解析才会进回调 - 首次渲染时（如 SSR 或静态 HTML）不会触发该回调，
oldValue是null，需在connectedCallback中手动读取：this.getAttribute('data-id')
constructor 里为什么不能操作 this.shadowRoot？
constructor 执行时元素还没挂载，this.shadowRoot 为 null，此时任何 DOM 操作都会抛 TypeError。它只适合做字段初始化、方法绑定、私有变量声明（如 this._timer = null）。
- 错误示例：
this.shadowRoot.innerHTML = '<div>hello</div>'→ 立即报错 - 正确做法：在
constructor中调用this.attachShadow({ mode: 'open' })创建shadowRoot，但不要往里写内容 - 禁止在
constructor里调用fetch、querySelector或任何依赖 DOM 就绪的操作
disconnectedCallback 清理逻辑为什么有时没执行？
它是清理资源的主要时机，但不可靠——只在元素被显式移除时大概率触发。页面刷新、关闭 tab、后台销毁等场景下，浏览器可能直接释放上下文，跳过此回调。
立即学习“前端免费学习笔记（深入）”；
- 所有定时器必须在这里
clearTimeout()/clearInterval()，但也要考虑 fallback：比如用AbortController.signal控制fetch，即使回调没执行也能中断请求 - 全局事件监听器必须解绑，否则内存泄漏风险极高
- 不能把关键持久化逻辑（如保存用户行为日志）放在这里，应提前触发或降级到
beforeunload事件兜底
connectedCallback 是唯一安全窗口，constructor 里多写一行 DOM 操作就崩，observedAttributes 漏一个字符就静默失效，disconnectedCallback 甚至可能根本不来。这些不是边界情况，是日常必踩的坑。 
