最常见的原因是未声明observedattributes静态getter；它必须返回严格匹配html属性名（含大小写和连字符）的字符串数组，且仅响应后续setattribute等动态修改，不触发初始值，需在connectedcallback中手动同步。
attributeChangedCallback 为什么没触发
最常见的原因是没在类里声明 observedAttributes 静态 getter。这个回调不会自动监听所有属性，浏览器只会在你明确列出的属性发生变化时才调用它。写错大小写、漏掉连字符（比如把 'data-id' 写成 'dataid'）、或拼成 'Size' 而不是 'size'，都会导致完全静默。
另一个隐蔽问题是：HTML 中已存在的属性值，在元素首次解析时**不会触发** attributeChangedCallback —— 它只响应后续的 setAttribute()、removeAttribute() 或属性被 JS 动态修改（通过 el.setAttribute() 形式），不响应构造时的初始值。
-
observedAttributes必须返回字符串数组，且每个字符串严格匹配 HTML 属性名（含大小写和连字符） - 直接赋值
this.disabled = true不会触发，因为这是 property，不是 attribute - 首次渲染时的属性值，需在
connectedCallback中手动读取并同步逻辑
怎么正确声明和使用 observedAttributes
必须定义为静态 getter，返回你要监听的属性名列表。不能是普通属性、不能是异步获取、不能是计算值。
static get observedAttributes() {
return ['label', 'disabled', 'data-id', 'max-length'];
}
注意：max-length 是合法的，但 maxLength 或 maxlength 就不会命中；data-id 和 dataId 是两个不同属性，后者根本不存在于 attribute 层面。
- 只监听你真正在意的属性，避免无谓开销
- 属性名必须全小写 + 连字符，和你在 HTML 中写的完全一致
- 如果属性名含数字开头（如
3d-enabled），也能正常工作，但需确保 HTML 中也这么写
attributeChangedCallback 的参数和类型陷阱
回调签名固定为 attributeChangedCallback(attrName, oldValue, newValue)，三个参数都是字符串。哪怕你在 HTML 写 <my-input value="42"></my-input>，newValue 也是 "42"，不是数字 42。首次设置某属性时，oldValue 为 null，不是空字符串。
别在回调里直接操作 DOM 树（比如 this.innerHTML = ...），尤其当组件用了 Shadow DOM —— 应该统一走 this.shadowRoot；也不建议在里面发起新请求或启动定时器，优先交给 connectedCallback 处理。
-
oldValue和newValue永远是字符串，需要类型转换时自己做Number()或JSON.parse() - 多次快速设置同一属性（如循环调用
setAttribute('count', i)），回调会逐次触发，不是防抖后的最终值 - 若属性值未变（
setAttribute('x', 'a')后又设回'a'），部分浏览器仍会触发，不要依赖“只在变化时调用”这一假设
如何补全首次渲染的属性同步
因为 attributeChangedCallback 不处理初始属性，你得在 connectedCallback 里手动拉一次：
connectedCallback() {
this._syncLabel();
this._syncDisabled();
}
<p>_syncLabel() {
const label = this.getAttribute('label');
if (label !== null) {
this.shadowRoot.querySelector('span').textContent = label;
}
}</p><p>_syncDisabled() {
const disabled = this.hasAttribute('disabled');
this.shadowRoot.querySelector('button').disabled = disabled;
}</p>
这样能保证静态 HTML 和动态创建两种路径行为一致。如果你的组件支持 SSR 或服务端生成 HTML，这步就更不能省。
真正容易被忽略的是：attributeChangedCallback 只管“谁变了”，不管“变成什么样才该更新 UI”。UI 同步逻辑最好抽成独立方法（如上面的 _syncLabel），既供回调调用，也供 connectedCallback 复用 —— 否则很容易漏掉初始状态，或者在多处重复写相同 DOM 更新代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
