在 custom element 的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用。这是 Web Components 技术中的一个重要特性，它能够让开发者更加灵活地控制元素的行为
connectedCallback：当 custom element 首次被插入文档 DOM 时，被调用。disconnectedCallback：当 custom element 从文档 DOM 中删除时，被调用。adoptedCallback：当 custom element 被移动到新的文档时，被调用。attributeChangedCallback: 当 custom element 增加、删除、修改自身属性时，被调用。
其中，connectedCallback 是在 custom element 首次被插入文档 DOM 时被调用的。这个回调函数通常用于执行一些初始化操作，比如添加事件监听器、请求数据等等。在这个时候，元素已经被添加到了文档中，可以访问到 DOM 和其他元素。
disconnectedCallback 是在 custom element 从文档 DOM 中删除时被调用的。这个回调函数通常用于清理一些资源，比如取消事件监听器、停止定时器等等。在这个时候，元素已经不再被文档所包含，无法访问到 DOM 和其他元素。
adoptedCallback 是在 custom element 被移动到新的文档时被调用的。这个回调函数通常用于处理一些文档级别的操作，比如重新计算布局（重排）、修改样式等等。在这个时候，元素已经从原来的文档中移除，并被添加到了新的文档中。
attributeChangedCallback 是在 custom element 增加、删除、修改自身属性时被调用的。这个回调函数通常用于处理一些属性相关的逻辑，比如根据属性值的变化更新元素的样式、重新渲染元素等等。在这个时候，元素的属性已经被修改，可以通过新的属性值来进行相应的处理。
需要注意的是，这些回调函数都是可选的，开发者可以根据实际需求来选择使用哪些回调函数。另外，这些回调函数只能在 custom element 的构造函数中进行定义，不能在元素实例中进行修改。
用法示例
我们来看一下它们的一下用法示例。下面的代码出自life-cycle-callbacks示例（查看在线示例）。这个简单示例只是生成特定大小、颜色的方块。custom element 看起来像下面这样：