自定义Web组件需通过attributeChangedCallback响应属性变化，仅对setAttribute等DOM操作生效，不响应JS属性赋值；须继承HTMLElement、注册元素并声明observedAttributes；注意HTML连字符名与JS驼峰名差异，newValue恒为字符串；手动同步property需在setter中调用setAttribute；回调内避免重复设置同名属性以防无限循环。
要让自定义 Web 组件响应 DOM 元素属性值的变化，必须使用 attributeChangedCallback，但它**只对通过 setAttribute、removeAttribute 或直接修改 HTML 字符串（如 innerHTML）触发的属性变更生效**，不会响应 JS 属性赋值（如 el.foo = "bar"）或布尔属性的“存在/不存在”切换（除非显式调用 setAttribute）。
确保组件继承 HTMLElement 并正确注册
自定义元素类必须继承 HTMLElement，并在 customElements.define() 中注册，同时在 observedAttributes 静态 getter 中声明需要监听的属性名（区分大小写，全小写推荐）：
class MyWidget extends HTMLElement {
static get observedAttributes() {
return ['label', 'disabled', 'max-value']; // 注意：连字符命名需与 HTML 中一致
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`属性 ${name} 从 "${oldValue}" 变为 "${newValue}"`);
if (name === 'label') {
this.textContent = newValue || '';
}
}
}
customElements.define('my-widget', MyWidget);
注意属性名与 HTML 属性的映射规则
HTML 中写的 max-value 对应 JS 中的 maxValue 属性，但 attributeChangedCallback 接收的是原始字符串名 "max-value"。它不自动转换驼峰，也不处理布尔属性的真假值转换——传入的 newValue 始终是字符串（包括 "true"、"false"、"" 或 null 表示移除）：
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
<my-widget disabled>→name="disabled",oldValue=null,newValue="" -
<my-widget disabled="false">→newValue="false"（不是布尔false） -
el.setAttribute('disabled', 'true')→newValue="true" -
el.disabled = true→ 不会触发 callback
手动同步属性与 property 的常见做法
若需响应 JS 属性操作（如 el.disabled = true），需在 setter 中主动调用 setAttribute 或 removeAttribute，才能触发回调：
立即学习“Java免费学习笔记（深入）”；
class MyWidget extends HTMLElement {
set disabled(value) {
if (value) {
this.setAttribute('disabled', '');
} else {
this.removeAttribute('disabled');
}
}
get disabled() {
return this.hasAttribute('disabled');
}
}
避免在回调中重复设置同一属性
在 attributeChangedCallback 内部再次调用 setAttribute 同一属性，会引发无限循环（因为又触发一次回调）。如需同步内部状态，应先判断值是否真正变化，或使用标志位控制：
- 比较
oldValue !== newValue是基础防护 - 若逻辑涉及多个属性联动，可加
this._settingInternally = true标志，setter 中检查该标志跳过触发 - 避免在回调里调用
this.setAttribute(name, ...)——除非你明确需要二次触发且已做好防重入
