connectedcallback 在自定义元素首次插入 active dom 树时执行，非构造函数或 html 解析完成时；此时 dom 已就位，可安全操作 parentnode、shadow dom 等，但需注意子元素就绪时机与初始化逻辑的合理性。
connectedCallback 什么时候真正执行？
它只在自定义元素**首次被插入到 active DOM 树**时触发，不是构造函数运行时，也不是 HTML 解析完就立刻调用。如果你写 <my-button></my-button> 在页面里，浏览器解析到它、完成实例化并挂载进 document.body（或任意有 layout 的父节点）后才执行；如果只是 document.createElement('my-button') 但没 appendChild()，它压根不会进 DOM，connectedCallback 就永远不会跑。
为什么在 connectedCallback 里操作 DOM 是安全的？
因为此时元素已真实存在于文档中，你可以放心读取 this.parentNode、查询子元素、绑定事件、渲染 Shadow DOM，甚至调用其他自定义元素的方法 —— 前提是那些子元素也已完成连接。常见错误包括：
- 在
constructor里调用this.innerHTML = '...'：DOM 还未存在，会静默失败或报错 - 在
connectedCallback里直接访问this.shadowRoot.querySelector('child-element')，但子元素还没触发自己的connectedCallback：此时子元素可能已挂载，但它的初始化逻辑（比如设置属性、渲染内容）未必完成 - 重复调用
appendChild/removeChild后误以为会再次触发connectedCallback：它只认“首次连接”，后续移动不重发
如何确保子自定义元素已 ready 再交互？
不能依赖父子元素的 connectedCallback 执行顺序，浏览器不保证子元素一定先于父元素完成连接。稳妥做法是监听子元素的 customElements.whenDefined('child-element')，再做查询和调用：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
connectedCallback() {
customElements.whenDefined('child-element').then(() => {
const child = this.shadowRoot?.querySelector('child-element');
if (child && typeof child.init === 'function') {
child.init();
}
});
}
或者更轻量：用 MutationObserver 监听子元素是否已具备预期状态（如已有某个 class 或 dataset 属性），避免阻塞主线程。
哪些初始化逻辑不该放在这里？
connectedCallback 是启动点，不是兜底容器。以下操作应避开：
- 大量计算或网络请求：会阻塞 DOM 渲染，建议用
requestIdleCallback或setTimeout(..., 0)推迟 - 重复绑定事件监听器：每次连接都绑，移除时又没清理，容易内存泄漏；应在
disconnectedCallback对应解绑 - 直接修改非自身属性的全局状态：比如改
window.xxx或调用外部模块的副作用函数，会让组件难以测试和复用 - 依赖父级 CSS 变量或布局尺寸的测量：此时样式可能未生效，
getBoundingClientRect()返回 0；可用ResizeObserver或queueMicrotask延后一帧
真正该放的，是那些“必须等 DOM 就位才能做的事”：挂载 Shadow DOM、设置初始事件监听、启动动画、触发一次性的内部状态同步 —— 其他都得看时机，别一股脑塞进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
