connectedcallback 中拿不到子元素是因为它只保证组件自身挂载，不保证子节点解析完成；需用 requestanimationframe 延后查询或确保模板已克隆插入。

connectedCallback 里为什么拿不到子元素？

因为 connectedCallback 只保证组件自身已挂载到主文档 DOM，不保证其内部的子节点（尤其是通过 HTML 模板插入的）已完成解析或渲染。常见错误是直接写 this.shadowRoot.querySelector('button') 返回 null。

解决办法：

• 如果依赖子元素存在，改用 requestAnimationFrame 延后一帧再查
• 若使用 <template></template> 插入内容，确保在 connectedCallback 中已执行完克隆和 append 操作
• 更稳妥的方式是在自定义元素的 constructor 中创建 shadowRoot，然后在 connectedCallback 中只做事件绑定、数据拉取等不强依赖子树的操作

attributeChangedCallback 没触发？检查 observedAttributes 声明

attributeChangedCallback 不是“监听所有属性”的通用钩子，它必须配合静态 getter observedAttributes 显式声明才生效。漏掉这一步，属性变更完全静默。

注意点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• observedAttributes 必须返回字符串数组，如 static get observedAttributes() { return ['disabled', 'data-id']; }
• 属性名大小写和连字符必须与 HTML 中完全一致：data-id ≠ dataId，Disabled ≠ disabled
• 仅响应 setAttribute() 或 HTML 解析时的初始值设置；直接赋值 el.disabled = true 是 property 操作，不触发该回调

disconnectedCallback 清理逻辑为什么有时没执行？

disconnectedCallback 是你清理定时器、取消 fetch、移除事件监听的最后确定时机，但它不被浏览器强制保证执行——用户强制关闭标签页、进程崩溃、系统杀进程时，这个钩子会被跳过。

因此不能在里面做关键操作：

• 别写 localStorage.setItem() 期望持久化状态
• 别访问 document 或已脱离 DOM 的节点（引用可能已失效）
• 清理前加 guard 判断，比如 if (this._timer) clearInterval(this._timer)
• 对重要副作用（如未完成的上传），建议额外在 beforeunload 事件中做轻量兜底

constructor 和生命周期钩子的执行顺序陷阱

构造函数 constructor 是最早执行的，但此时 this.shadowRoot 还为 null，任何 DOM 操作都会报错；而 connectedCallback 虽晚，却仍不能依赖子元素就绪。

典型误用模式：

• 在 constructor 里调用 this.innerHTML = 'xxx' —— 错，此时无 shadowRoot，且会污染 light DOM
• 在 connectedCallback 里用 async/await —— 错，所有生命周期钩子都禁止 async 函数签名，可调用 Promise 并用 .then()
• 在 attributeChangedCallback 里修改其他被观察的属性 —— 容易引发递归调用，需加条件判断避免死循环

最常被忽略的是：这些钩子不是“事件”，它们没有异步调度机制，也不排队；多个同步操作（如连续 setAttribute）可能合并触发一次回调，且无重入保护。写清理或状态同步逻辑时，得自己加锁或标记位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！