浏览器的 Web Components 中，Class 是用来定义自定义元素的主要方式，自定义元素支持以下生命周期回调方法：

生命周期回调：connectedCallback 和 disconnectedCallback

1. connectedCallback
   作用：当自定义元素被插入到文档 DOM 中时，浏览器会自动调用该回调。
   用途：
   初始化 DOM 或状态。
   绑定事件监听器。
   触发外部依赖的加载操作。
   典型场景：
   加载数据、动态渲染子组件。
   初始化第三方库（如动画、图表库等）。

class MyElement extends HTMLElement {
    connectedCallback() {
        console.log('元素已插入到 DOM');
        this.innerHTML = '<p>Hello, World!</p>';
    }
}
customElements.define('my-element', MyElement);

2. disconnectedCallback
   作用：当自定义元素从文档 DOM 中被移除时，浏览器会调用该回调。
   用途：
   清理 DOM 或状态。
   移除事件监听器，释放资源。
   停止定时器或取消网络请求。
   典型场景：
   停止动画或计时器。
   删除与外部环境相关的绑定操作。

class MyElement extends HTMLElement {
    disconnectedCallback() {
        console.log('元素已从 DOM 中移除');
    }
}
customElements.define('my-element', MyElement);