html原生不支持属性观察的自动响应式更新，唯一标准方案是通过customelements.define配合attributechangedcallback手动实现。
HTML 原生不支持属性观察（attribute mutation observer）的自动响应式更新，所谓“自定义组件的属性观察机制”必须靠 customElements.define 配合 attributeChangedCallback 手动实现——这是唯一可靠、标准、无需框架的方案。
为什么直接监听 setAttribute 不行
你无法全局拦截或重写 setAttribute，且 DOM 属性变更不会自动触发事件。即使给元素加 MutationObserver 监听 attributes，也得手动绑定到每个实例，无法复用、不可继承、不响应 observedAttributes 声明的白名单。
-
MutationObserver是通用工具，但对自定义元素来说属于“绕路”，它不区分属性是否被声明为可观察，也不触发生命周期回调 - 浏览器只会在你显式声明
observedAttributes静态 getter，并定义attributeChangedCallback时，才在属性变更（包括初始化时的 HTML 属性）时调用该回调 - 未在
observedAttributes中列出的属性变更，attributeChangedCallback根本不会执行
attributeChangedCallback 的触发条件和参数含义
这个回调不是“只要属性变了就调”，它有明确前提：属性名必须出现在 observedAttributes 返回的数组里，且变更必须是通过 setAttribute、removeAttribute 或 HTML 初始化完成的。
- 回调签名为
attributeChangedCallback(attrName, oldValue, newValue)，三个参数都是字符串，oldValue和newValue在属性首次存在时可能为null - 若属性值相同（比如两次都设为
"true"），浏览器仍会触发回调；但若通过el.foo = "bar"设置 JS 属性（非 attribute），则完全不会触发 - HTML 中写的属性（如
<my-input value="test"></my-input>）会在元素 upgrade 后立即触发一次回调，oldValue为null，newValue为"test"
常见错误：把布尔属性或数字当 JS 类型处理
HTML attribute 始终是字符串，attributeChangedCallback 收到的 newValue 永远是字符串。如果你期望 disabled 是布尔值、count 是数字，必须手动转换——否则容易在条件判断或计算中出错。
- 布尔属性（如
disabled、loading）应按是否存在判断：this.hasAttribute('disabled')，而不是this.getAttribute('disabled') === 'true' - 数字类属性建议用
Number(newValue)或parseInt(newValue, 10)，注意Number('')得0，而parseInt('', 10)得NaN，需加默认值兜底 - JSON 字符串（如
data-config='{"theme":"dark"}'）务必用try/catch包裹JSON.parse，避免因 HTML 中引号不合法导致解析失败静默中断
性能与兼容性提醒
每次属性变更都会同步调用 attributeChangedCallback，如果里面做复杂计算、DOM 查询或触发重排，可能卡顿。而且该机制在所有现代浏览器（Chrome 33+、Firefox 63+、Safari 10.1+、Edge 79+）都可用，但 IE 完全不支持。
- 避免在回调里直接操作 Shadow DOM 内容，尤其不要反复调用
this.shadowRoot.querySelector；可缓存节点引用或用slotchange替代部分场景 - 多个属性同时变更（如
el.setAttribute('a', '1'); el.setAttribute('b', '2');）会触发两次独立回调，无法合并；如有联动逻辑，建议用requestIdleCallback或节流封装 - 服务端渲染（SSR）时，若 HTML 已含属性，客户端 hydrate 过程中会再次触发回调——这是正常行为，不是重复执行，但需确保回调幂等
真正关键的一点是：别试图用 Object.defineProperty 在原型上劫持 setAttribute，它既不覆盖内置方法，也无法捕获通过 el.setAttribute 的调用；唯一正解就是老老实实写 observedAttributes + attributeChangedCallback，并接受 attribute 就是字符串这一事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
