attributechangedcallback仅响应满足三条件的属性变更：属性名严格匹配observedattributes数组、通过setattribute或html解析触发、且属性真实存在；它不响应js属性赋值，且newvalue/oldvalue恒为字符串，首次触发时oldvalue为null。
自定义元素的 attributeChangedCallback 不会自动响应任意属性修改，必须满足三个硬性条件：属性名完全匹配 observedAttributes 返回的字符串数组、变更通过 setAttribute() 或 HTML 初始解析触发、且该属性确实存在于元素标签中。
observedAttributes 里写错名字就完全不触发
浏览器只认你写的字面量，大小写、连字符、data- 前缀一个都不能差。
-
<my-card label="abc"></my-card>→ 必须写return ['Label']，写['label']或['labelname']都无效 -
<my-input data-config='{"a":1}'></my-input>→ 必须写return ['data-config']，漏掉data-或写成['config']就监听不到 - 数组里混入不存在的属性（比如
['value', 'disabled']，但你的元素根本不支持disabledattribute）→ 不报错，但白监听
attributeChangedCallback 只响应 attribute，不响应 property
这是最常踩的坑：改 JS 属性不会进回调，哪怕那个属性名也在 observedAttributes 里。
-
el.setAttribute('count', '5')→ 触发回调 -
el.count = 5或el.dataset.config = 'xxx'→ 绝对不触发（dataset是语法糖，但部分旧环境行为不一致，务必统一用setAttribute） - 首次渲染时 HTML 带属性（如
<my-toggle checked></my-toggle>）→ 触发一次，oldValue是null，不是undefined或空字符串
回调里处理 newValue 要防 null 和重复
oldValue 和 newValue 都是字符串，且首次设置时 oldValue === null，直接做类型转换或逻辑判断容易出错。
- 别写
if (!oldValue)判断是否首次 ——null是 falsy，但首次就是null，会误判 - 别直接
JSON.parse(newValue)—— 如果newValue是null，会抛错；先if (newValue !== null) - 连续两次
el.setAttribute('count', '5')会触发两次回调 —— 开头加if (oldValue === newValue) return避免无谓更新 -
data-属性值永远是字符串，解析 JSON、转数字、布尔都得自己做，浏览器不帮你
真正难的不是写对 observedAttributes，而是确保所有外部调用（框架传 props、手动 JS 控制）都走 setAttribute 而非 property 赋值；一旦混用，监听就断了，而且没有任何错误提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
