Web Components 生命周期浏览器 - 查看回调执行

Web Components 提供四个核心生命周期回调：
1. connectedCallback() — 元素被插入到 DOM 时调用。适合初始化 DOM 操作、获取数据、添加事件监听器。
2. disconnectedCallback() — 元素从 DOM 移除时调用。适合清理资源、移除事件监听器、取消定时器。
3. attributeChangedCallback(name, oldVal, newVal) — 观察的属性发生变化时调用。需要配合 static observedAttributes 使用。
4. adoptedCallback(oldDoc, newDoc) — 元素被移动到新的文档（如 iframe）时调用。使用场景较少。

constructor() 在元素实例化时立即调用，此时元素尚未连接到 DOM，不应操作 DOM 或访问父节点。适合初始化内部状态、创建 Shadow DOM。
connectedCallback() 在元素被插入 DOM 后调用，此时可以安全地访问父节点、子节点、计算样式、发起网络请求等。元素可能被多次移除和重新插入，因此 connectedCallback 可能被多次调用，而 constructor 只调用一次。

只有当属性名在 static observedAttributes 数组中时，该属性的变化才会触发 attributeChangedCallback。回调在元素连接到 DOM 之前或之后都会触发——只要属性值发生变化。如果新旧值相同，浏览器不会触发回调。注意：属性名是大小写不敏感的（HTML 属性会自动转为小写）。

adoptedCallback 在元素通过 document.adoptNode() 被移动到另一个文档时触发（例如在主文档和 iframe 之间移动）。它接收两个参数：旧文档和新文档。
实际使用场景较少，主要用于：跨文档组件迁移时重新绑定文档相关资源、在 iframe 间移动组件时更新内部引用。本工具中点击"迁移到 iframe 并返回"按钮即可观察完整流程：disconnected → adopted → connected → disconnected → adopted → connected，共触发 6 次回调。

首次创建并插入 DOM：constructor → connectedCallback（如果属性在连接前设置，attributeChangedCallback 可能在两者之间触发）。
属性修改：attributeChangedCallback
移除元素：disconnectedCallback
重新插入：connectedCallback（再次触发）
跨文档移动：disconnectedCallback → adoptedCallback → connectedCallback

Custom Elements V1（包括生命周期回调）在所有现代浏览器中得到良好支持：Chrome 54+、Firefox 63+、Safari 10.1+、Edge 79+。adoptedCallback 在 Safari 中的支持稍晚（Safari 10.1+ 基本支持，但部分场景行为可能略有差异）。对于需要支持旧版浏览器的项目，可以使用 Polyfill（如 @webcomponents/custom-elements）。