Custom Element 生命周期回调由浏览器在 DOM 变化时自动触发，connectedCallback 仅在元素首次插入 active DOM 树时执行；attributeChangedCallback 需通过 observedAttributes 显式声明监听属性；disconnectedCallback 是清理资源的主要时机但不保证总被调用；constructor 仅限轻量初始化，不可操作 DOM，且必须继承 HTMLElement 并首行调 super()。
Custom Element 的生命周期回调不是“HTML 做的”，而是通过 JavaScript 类定义 + customElements.define() 注册后，由浏览器在 DOM 变化时自动触发的。你写的是 HTML 标签，但真正响应生命周期的是 JS 类里的方法。
connectedCallback 什么时候执行？
它只在元素**首次被插入到 document 的 active DOM 树中**时调用，不是构造函数执行时，也不是标签写在 HTML 里就立刻触发。
- 如果元素是静态写在 HTML 中（如
- 如果是动态创建：
document.createElement('my-button')后没调appendChild()，connectedCallback不会执行 - 重复
appendChild()/removeChild()不会反复触发 —— 只有“首次连接”才算 - 在 Shadow DOM 内部插入该元素，不触发父文档的
connectedCallback；它只关心是否连入了当前文档的主 DOM 树
attributeChangedCallback 怎么监听指定属性？
这个回调不会自动监听所有属性，必须在 observedAttributes 静态 getter 中显式声明要观察的属性名，否则即使属性变了也不会触发。
- 必须返回一个字符串数组，例如：
static get observedAttributes() { return ['disabled', 'label']; } - 属性名区分大小写，且必须和 HTML 中写的完全一致（
data-id就写'data-id'，不能写'datasetid'） - 只有通过
setAttribute()、removeAttribute()或 HTML 解析时设置的值才会触发；直接改this.disabled = true不会触发（因为这不是 attribute，是 property） - 回调参数顺序固定：
attributeChangedCallback(attrName, oldValue, newValue)，oldValue在首次设置时为null
disconnectedCallback 是清理资源的唯一时机吗？
是，但要注意它**不一定总被调用** —— 比如页面刷新、关闭标签页时，浏览器可能直接销毁上下文，不保证执行。
- 必须在这里清除定时器（
clearTimeout()/clearInterval()）、取消fetch或AbortController、移除全局事件监听（window.removeEventListener()） - 不要在这里操作 DOM（比如调用
this.remove()），因为此时元素已脱离 DOM，但this仍有效 - 如果组件内部用了 jQuery 插件（如
$().datepicker()），需手动销毁（如$.fn.datepicker.destroy()），否则容易内存泄漏 - 注意：Shadow DOM 中的子元素被移除，不会触发其父 Custom Element 的
disconnectedCallback
constructor 和 connectedCallback 的关键区别
构造函数（constructor）是 JS 实例初始化阶段，connectedCallback 才是 DOM 级别的“挂载完成”信号 —— 二者不可互换。
-
constructor中只能做轻量初始化：调super()、声明私有字段、绑定方法（this.handleClick = this.handleClick.bind(this)），**不能访问this.innerHTML、不能调this.appendChild()、不能查getBoundingClientRect()**（DOM 还未存在） -
connectedCallback才能安全操作 DOM：渲染 Shadow DOM、设置默认 attribute、触发初始事件、启动动画、发起首次数据请求 - 如果在
constructor里提前调this.setAttribute('ready', 'true')，而该属性又在observedAttributes中，会导致attributeChangedCallback在connectedCallback之前就被调一次 —— 顺序容易混乱
最容易被忽略的一点：自定义元素类必须继承 HTMLElement，且 constructor 内第一行必须调 super()，漏掉就会报 Failed to construct 'MyElement': Please use the 'new' operator 这类错误 —— 浏览器不会给你任何提示，只会静默失败或抛出难以定位的异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
