在 Web Components 中，attributeChangedCallback 并不会在任何场景下自动触发。要让这个属性监听回调真正生效，必须同时满足几个前提：自定义组件需要继承 HTMLElement，并且要明确声明 observedAttributes；此外，属性变化还必须通过 DOM API 触发。还有两个经常被忽视的细节：newValue 和 oldValue 始终是字符串；而初始属性值也不会由 attributeChangedCallback 自动处理，通常需要在 connectedCallback 中手动读取并初始化。
Web Components 可以通过 attributeChangedCallback 监听属性变化，但前提是必须满足几个关键条件，否则即使属性被修改，也不会执行这个回调函数。
必须继承 HTMLElement 并声明需要监听的属性名
自定义元素类必须继承 HTMLElement，同时在静态 getter observedAttributes 中清晰列出要监听的属性名称（必须使用全小写，并采用连字符写法）：
- ✅ 正确写法：
static get observedAttributes() { return ['disabled', 'data-id', 'max-count']; } - ❌ 错误写法：没有声明该 getter；或使用驼峰写法如
'maxCount'；或大小写不一致如'Disabled'
只会响应通过 DOM API 产生的属性变化
这个回调并不会捕获所有“看似修改了属性”的操作，它只会对以下几种方式生效：
el.setAttribute('data-id', '123')el.removeAttribute('disabled')- 直接更新 HTML 字符串（如
el.innerHTML = '）' - 不生效的操作：
el.dataId = '789'、el.disabled = true、初始 HTML 中写的
在回调中处理属性值时要注意类型和副作用
attributeChangedCallback(attrName, oldValue, newValue) 的三个参数里，newValue 和 oldValue 永远是字符串，并且在某些情况下可能为 null（例如首次设置或属性被移除时）：
- 数值类型需要手动转换：
const count = Number(newValue) || 0 - 布尔值不要直接依赖真假判断：
if (newValue === 'true')，而不是if (newValue) - 避免在回调中反复对同一属性调用
setAttribute，否则很容易造成无限循环 - 不要在这里执行过重的操作（如网络请求、大量重绘），因为它可能被频繁触发
初始属性值需要在 connectedCallback 中主动补读
如果属性是直接写在 HTML 里的（如 attributeChangedCallback。因此，你需要在 connectedCallback 中主动读取这些初始参数：
this.disabled = this.hasAttribute('disabled');this.id = this.getAttribute('data-id') || '';- 然后再根据这些值初始化内部状态、样式或无障碍属性
