HTML结构在WebComponents架构中的生命周期钩子执行顺序

connectedCallback 在元素插入主文档 DOM 时才触发，非 HTML 解析时；disconnectedCallback 不保证执行；attributeChangedCallback 需显式声明 observedAttributes 且大小写精确匹配；所有钩子必须同步执行，不可 async/await。

connectedCallback 不是写完 HTML 就触发，disconnectedCallback 也不一定执行——Web Components 的生命周期钩子不是按 DOM 树遍历顺序“一层层调用”，而是由浏览器根据元素挂载/卸载动作**逐个实例触发**，且每个钩子的触发条件非常具体。

为什么 connectedCallback 没在页面加载时立刻执行？

它只在元素真正被插入到主文档（document）的 DOM 树中时才触发，不是解析 HTML 时就调用，也不是每次 appendChild() 都算数——如果父节点还没挂载，子节点即使被 append 进去，connectedCallback 也不会立即执行。

• 常见错误：在 connectedCallback 里直接 this.querySelector('slot') 或 this.shadowRoot.querySelector('.item')，结果返回 null ——因为子元素可能尚未解析完成或未升级（custom element upgrade 还没发生）
• 安全做法：需要查子节点时，用 requestAnimationFrame 或 Promise.resolve().then() 延后一帧再查；或者监听 slotchange 事件
• 注意：constructor 中不能操作 DOM，此时 this.shadowRoot 为 null，也不能调用 querySelector

attributeChangedCallback 为何完全没反应？

它根本不会监听任意属性变更，必须配合 static get observedAttributes() 显式声明，且大小写、连字符必须与 HTML 属性名**一字不差**。

• 比如 HTML 写的是 <my-button size="large">，那么 observedAttributes 必须返回 ['size']，写成 ['Size'] 或 ['data-size'] 都无效
• 只响应 setAttribute('size', 'small') 或 HTML 解析时的初始赋值，不响应 el.size = 'small'（这是 property 赋值，走的是 JS 属性访问路径）
• 首次初始化时，oldValue 是 null，newValue 是实际值；后续变更才有旧值对比

disconnectedCallback 是清理资源的最后机会，但别太信任它

它是你清除定时器、移除事件监听、取消 fetch 的唯一确定时机，但浏览器不保证它一定会执行——用户强制关闭标签页、进程被 kill、或页面崩溃时，这个回调就静默跳过了。

• 别在里面做关键持久化操作，比如 localStorage.setItem() 或发送埋点日志
• 清理前务必加 guard 判断：if (this._timer) clearInterval(this._timer)，避免重复调用报错
• 不要访问 document 或已脱离 DOM 的节点（如 this.parentElement），引用可能已失效

所有生命周期钩子里都不能用 async/await

这不是限制，而是规范要求：这些钩子必须同步返回，否则浏览器无法协调组件状态。你可以调用返回 Promise 的函数，但得用 .then() 处理，不能 await。

立即学习“前端免费学习笔记（深入）”；

• 错误写法：async connectedCallback() { await fetch('/api'); } → 会报错或行为不可预测
• 正确写法：connectedCallback() { fetch('/api').then(r => r.json()).then(data => this.render(data)); }
• 特别注意：constructor 里也不能操作 DOM，更不能 await ——它必须是纯同步构造逻辑

真正容易被忽略的，不是哪个钩子先执行，而是每个钩子的**触发前提和边界条件**：它们不是“自动运行的流程”，而是浏览器对特定 DOM 操作的响应。写错一个 observedAttributes，整个属性响应就失效；少一个 if (this._timer) guard，组件复用时就内存泄漏。