customElements.define() 必须在元素首次解析前执行，否则永远是HTMLUnknownElement；connectedCallback仅在元素首次插入文档主树时触发；attributeChangedCallback需显式声明observedAttributes且只响应attribute变更；disconnectedCallback不可靠需双保险清理；constructor中禁止DOM操作但可attachShadow。
customElements.define() 必须在元素首次被解析前执行，否则它永远只是个 HTMLUnknownElement；生命周期回调不是“自动监听”，而是严格依赖时序、声明和 DOM 操作方式——漏掉任一环节，UI 就会静默失效。
connectedCallback 为什么没触发？检查元素是否真进了 active DOM 树
它只在元素**首次插入文档主树**时调用，不是标签写出来就触发，也不是 new 实例就调。常见失效场景：
- HTML 中写了
<ds-card></ds-card>，但customElements.define()还没执行 —— 浏览器直接当HTMLUnknownElement处理，后续永不补救 - 动态创建后没调
appendChild()：const el = document.createElement('ds-card');却没挂到 DOM 上 - 用
innerHTML = '<ds-card></ds-card>'插入，或被 React/Vue 等框架接管渲染 —— 它们不走原生 DOM 插入路径，connectedCallback不触发 - Shadow DOM 内部插入该自定义元素，不会触发父文档的
connectedCallback，它只认当前文档主树
attributeChangedCallback 不生效？先确认 observedAttributes 声明和 attribute 写法
这个回调完全不自动，必须靠 static get observedAttributes() 显式声明，且只响应 attribute 变更（不是 property）。容易踩的坑：
-
static get observedAttributes()必须返回字符串数组，比如return ['data-id', 'disabled']；写成['DataId']或['datasetid']都无效 - HTML 属性名必须严格匹配：写
<ds-input data-user-id="123"></ds-input>，就得监听'data-user-id'，不是'userId'或'user-id' -
this.value = 'abc'是 property 赋值，不触发回调；得用this.setAttribute('value', 'abc')或初始 HTML 属性才进回调 - 首次渲染的属性值不会进
attributeChangedCallback（oldValue是null），初始化逻辑仍得在connectedCallback里手动读取this.getAttribute('value')
disconnectedCallback 不可靠，清理逻辑必须双保险
它只在元素被显式移除时大概率触发，但页面刷新、关闭 tab、后台销毁等场景下，浏览器可能直接释放上下文，跳过此回调。所以：
立即学习“前端免费学习笔记（深入）”；
- 所有定时器必须在这里
clearTimeout()/clearInterval()，但也要 fallback：比如用AbortController.signal控制fetch，即使回调没执行也能中断请求 - 全局事件监听（如
window.addEventListener('resize', handler)）必须配对removeEventListener，且建议在绑定时存引用，避免重复绑定或漏删 - 如果用了
MutationObserver或IntersectionObserver，也必须在此处.disconnect()，否则观察器持续持有节点引用，导致内存泄漏
constructor 里不能操作 DOM，但可以 attachShadow
constructor 在元素创建但尚未插入 DOM 时执行，此时 this.shadowRoot 为 null，document.querySelector 查不到自己。正确用法是：
- ✅ 只做轻量初始化：声明私有变量（如
this._abort = new AbortController()）、绑定方法（this.handleClick = this.handleClick.bind(this)）、调用this.attachShadow({ mode: 'open' }) - ❌ 禁止访问
this.shadowRoot、禁止调用this.querySelector()、禁止发起fetch或设置innerHTML - ⚠️ 注意：不能在
super()后加setTimeout等异步逻辑，因为此时 DOM 依然不可用，且元素还没进入生命周期流程
真正复杂的 UI 组件，往往不是靠某个钩子“一锤定音”，而是靠 constructor 做轻量准备、connectedCallback 做首次可交互初始化、attributeChangedCallback 做增量响应、disconnectedCallback 做尽力清理 —— 四者缺一不可，且每一步的边界都极窄。稍一越界，就变成看不见的 bug。
