connectedcallback中无法获取子元素，因仅保证组件挂载而非子节点解析完成；需用requestanimationframe延后查询或显式克隆template内容，并加null guard防护。
connectedCallback 里拿不到子元素，怎么写才不翻车
因为 connectedCallback 只保证组件自身挂载到主文档，不保证内部子节点（尤其是 <template></template> 克隆内容）已解析完成。直接 this.shadowRoot.querySelector('button') 返回 null 是最常见现象。
实操建议：
- 用
requestAnimationFrame延后一帧再查：确保浏览器完成子树解析和 layout - 如果用了
<template></template>，必须在connectedCallback中显式克隆并 append 到this.shadowRoot，不能依赖外部插入 - 更稳妥的做法是把 DOM 查询逻辑封装成方法，并加 null guard：
if (!this.shadowRoot) return;
attributeChangedCallback 不触发？先盯死 observedAttributes
这个钩子根本不会自动监听任何属性——哪怕你写了方法，没声明 observedAttributes 就等于没写。漏掉、大小写错、连字符不一致，全都会静默失效。
实操建议：
- 静态 getter 必须返回字符串数组：
static get observedAttributes() { return ['data-id', 'disabled']; } - HTML 写的是
data-user-id="42"，JS 就得监听'data-user-id'，不是'userId'或'dataset.userid' - 首次渲染的属性值（如 SSR 输出的
<x-input value="abc"></x-input>）不会进这个钩子，oldValue是null，得在connectedCallback里手动读：this.getAttribute('value')
disconnectedCallback 清理失败，内存泄漏就藏在这儿
它确实是清理定时器、事件监听、MutationObserver 的最后机会，但浏览器不保证它一定执行——用户关标签页、系统杀进程时，这个钩子会被跳过。
实操建议：
- 所有清理操作前加判断：
if (this._timer) clearInterval(this._timer); - 别在里面做关键副作用：比如
localStorage.setItem()或访问已脱离 DOM 的节点 - 对重要状态（如未完成上传），额外绑定
beforeunload做轻量兜底 - 框架中动态挂载/卸载频繁时，考虑加复用池，避免反复创建销毁实例
constructor 里写 DOM 操作，报错是必然的
constructor 执行时，this.shadowRoot 还是 null，document.querySelector 也查不到自己——这是最硬的限制，不是兼容性问题。
实操建议：
- 只做三件事：声明私有字段（如
this._value = null）、绑定方法（this.handleClick = this.handleClick.bind(this)）、调用this.attachShadow({ mode: 'open' }) - 绝对不要出现：
this.shadowRoot.innerHTML = ''、this.querySelector('input')、setTimeout(...)（即使 super() 后也不行） - 异步初始化逻辑一律挪到
connectedCallback，且要加初始化标志位防重复执行
connectedCallback 和子节点就绪之间的非同步性，以及 attributeChangedCallback 对初始属性的完全无视——这两点一旦没处理好，hydration 不一致、UI 错乱、资源泄漏就会在大型系统里反复出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
