attributeChangedCallback不触发的最常见原因是HTML属性名与observedAttributes数组不匹配，包括大小写、连字符、data-前缀等必须完全一致；它仅响应setAttribute和HTML初始解析，不响应JS属性赋值；oldValue首次为null，需严格比较；newValue恒为字符串，data-属性须显式声明。
attributeChangedCallback 不触发的常见原因
最常遇到的问题不是代码写错，而是 HTML 属性名和 observedAttributes 数组不匹配。浏览器严格按字符串逐字符比对，大小写、连字符、data- 前缀一个都不能少。
- HTML 写的是
<my-card Label="abc">，但observedAttributes里写['label']→ 不触发（L 大写） - HTML 是
<my-card data-config='{"a":1}'>，但数组里只写['config']→ 不触发（漏了data-） - 数组里写了
['disabled', 'count']，但你的元素根本不支持disabled属性 → 不报错，但白监听
attributeChangedCallback 只响应 setAttribute，不响应 this.xxx 赋值
attributeChangedCallback 是 HTML attribute 层的监听器，不是 JS property 层的响应式系统。改 this.title = 'new' 或 this.dataset.id = '123' 完全不会进回调。
- 触发路径只有两条：HTML 初始解析（如
<my-input value="init">）和el.setAttribute('value', 'x') -
el.value = 'x'是 DOM property 操作，不产生 attribute mutation -
el.dataset.config = 'y'是语法糖，旧版浏览器行为不一致，务必统一用setAttribute('data-config', 'y')
oldValue 是 null，不是 undefined 或空字符串
首次挂载时已存在的属性，oldValue 一定是 null。用 !oldValue 判断“是否首次”会误判空字符串或 '0' 等 falsy 值。
- 正确判断：
if (oldValue === null) { /* 首次 */ } - 连续两次
setAttribute('count', '5')会触发两次回调，开头加if (oldValue === newValue) return防重复 -
newValue永远是字符串，JSON.parse(newValue)前必须先if (newValue != null)，否则null会炸
data-* 属性要监听就得显式列进 observedAttributes
浏览器不会自动监听任何 data- 属性，哪怕你用了 dataset API。想让 data-series 变化触发回调，就必须把它写进数组，并确保后续只用 setAttribute 修改。
立即学习“前端免费学习笔记（深入）”；
-
attributeFilter和MutationObserver是另一套机制，别混用 —— 自定义元素该用observedAttributes -
data-user-id在observedAttributes里必须写成'data-user-id'，不能写成'userId'或'dataUserId' -
data-值永远是字符串，转数字得Number(this.getAttribute('data-step'))，别信+this.dataset.step
真正容易被忽略的点是：observedAttributes 声明后，你仍需在回调里手动做类型转换、防重、null 判断——它只负责“通知变了”，不帮你处理“怎么变”。
