connectedCallback 在元素挂载到主文档 DOM 时执行，适合一次性初始化；attributeChangedCallback 需配合 observedAttributes 显式声明才响应属性变更；disconnectedCallback 是清理资源的最后时机但不保证执行；adoptedCallback 仅用于跨 iframe 场景；所有回调中不可用 async/await，constructor 中不可操作 DOM。
connectedCallback 只在元素真正挂载到主文档 DOM 时执行，不是写完 HTML 就调用，也不是每次 appendChild() 都触发。它适合做一次性初始化：绑定事件、拉取数据、设置初始样式。但要注意，此时子元素可能还没解析完成，别依赖 querySelector 查找尚未存在的子节点。
为什么 attributeChangedCallback 没反应？
它根本不会自动监听任意属性——必须配合 static get observedAttributes() 显式声明。这个 getter 必须返回字符串数组，比如 ['size', 'data-id']；大小写和连字符必须和 HTML 中写的完全一致（data-id ≠ dataId）。只响应 setAttribute() 或 HTML 解析触发的变更，直接赋值 el.size = 'large' 是 property 操作，不触发回调。
disconnectedCallback 是清理资源的最后机会，但不保险
这是你清除定时器、移除事件监听、取消未完成 fetch 的唯一确定时机。但浏览器不保证它一定执行：用户强制关页、崩溃、或进程被杀时，它就静默跳过了。所以别在里面做关键持久化（比如写 localStorage），也不该访问 document 或其他已脱离 DOM 的节点——引用可能已失效。清理逻辑建议加 guard 判断，比如 if (this._timer) clearInterval(this._timer)。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
adoptedCallback 基本只在跨 iframe 场景下有用
日常开发几乎遇不到。只有当元素从一个文档（如主页面）被 appendChild() 到另一个文档（如 <iframe> 的 contentDocument）时才会触发。如果你没在做跨文档拖拽、嵌入或 iframe 组件桥接，可以安全忽略它。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：所有生命周期回调里都不能用 async/await，但可以调用返回 Promise 的函数并用 .then() 处理；另外，constructor 里不能操作 DOM，因为此时 this.shadowRoot 还是 null。
