attributechangedcallback仅在满足三个条件时触发：类中定义static get observedattributes()返回含对应属性名的数组，且属性通过setattribute()或html初始化写入；data-*属性需逐个以连字符格式列出，赋值必须用setattribute()；初始值需在connectedcallback中手动同步，布尔/数字/json类型须手动转换。
自定义元素的属性变化不会自动触发响应逻辑，必须显式声明可观察属性并实现回调函数——这是唯一标准路径，其他方式要么不可靠，要么绕远路。
attributeChangedCallback 为什么没被调用
这个回调根本不会执行，除非你同时满足三个条件：类里定义了 static get observedAttributes()，返回数组里包含对应属性名，且该属性是通过 setAttribute() 或 HTML 初始化写入的。
-
observedAttributes返回的属性名必须和 HTML 中写的完全一致：写的是max-length，就不能写成maxLength或maxlength -
data-id和dataId是两个不同东西，后者在 attribute 层面根本不存在 - 直接赋值
el.disabled = true或修改el.dataset.id都不会触发它 - HTML 中写的初始值（如
<my-input value="test"></my-input>）会在 upgrade 后立即触发一次，oldValue为null
data-* 属性怎么监听才有效
浏览器不认 data-* 的通配规则，想让它响应变更，只能老老实实逐个列进 observedAttributes，且必须用连字符格式。
- 要监听
data-mode，就得写return ['data-mode']，不能写['data-*']或['dataset.mode'] - 改值必须用
el.setAttribute('data-mode', 'edit')，el.dataset.mode = 'edit'完全无效 -
data-值始终是字符串，JSON.parse(el.dataset.config)必须包try/catch，字段缺失或格式错会直接中断回调 - 别在
constructor里读this.dataset，此时 DOM 还没挂载，值是空对象
初始属性值怎么同步到内部状态
attributeChangedCallback 不处理初始值，只响应后续变更。HTML 里写的属性值得在 connectedCallback 里手动读取并同步。
- 在
connectedCallback中遍历this.attributes或逐个调this.getAttribute('value') - 对布尔属性（如
disabled）要判断是否存在：this.hasAttribute('disabled')，而不是读值 - 数字、JSON 类型必须手动转换：
parseInt(this.getAttribute('count'), 10)、JSON.parse(this.getAttribute('config') || '{}') - 避免重复同步：在
attributeChangedCallback里更新状态时，记得跳过初始那次（oldValue === null可作为判断依据）
为什么不用 MutationObserver 监听属性
它能监听，但对自定义元素来说是错位工具：无法复用、不区分白名单、不触发生命周期，还容易漏掉关键变更。
-
MutationObserver需为每个实例单独绑定，没法继承，也不能随组件销毁自动清理 - 即使开了
attributes: true，它也会捕获所有属性变更，包括你根本不关心的id、class，得靠attributeFilter手动筛 - 它收不到
el.classList.add()或el.hidden = true这类反射属性变更，因为这些不走 attribute 层 - 真正需要响应 class 切换或隐藏状态时，应该用
el.hidden和el.classList直接操作，而不是监听它们
最易被忽略的一点：attributeChangedCallback 的参数全是字符串，哪怕你在 HTML 里写 <my-switch checked></my-switch>，收到的 newValue 也是 ""，不是 true；而 removeAttribute('checked') 传来的 newValue 是 null，不是 false。类型转换必须由你亲手做，没有例外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
