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"></my-button>，那么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——它必须是纯同步构造逻辑
observedAttributes，整个属性响应就失效；少一个 if (this._timer) guard，组件复用时就内存泄漏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
