自定义HTML元素需继承HTMLElement或其子类并调用super()，声明observedAttributes和attributeChangedCallback，扩展内置元素须用is属性注册，避免constructor中读取未初始化属性。
要让自定义 HTML 元素自动获得父类的属性拦截能力，关键不是“模拟”或“手动复制”，而是**真正继承 HTMLElement 或其子类，并正确启用浏览器原生的属性观察机制**。只有这样，元素才能像 、
必须继承标准元素类并调用 super()
所有自定义元素若想拥有属性拦截（即对 setAttribute、removeAttribute、HTML 解析等操作作出反应），第一步是继承正确的基类：
- 扩展通用容器：用 class MyEl extends HTMLElement —— 支持自定义属性拦截，但不带表单语义
- 扩展内置控件：如 class MyInput extends HTMLInputElement —— 自动拥有 value、checked、disabled 等属性的 getter/setter 和底层同步逻辑
- 无论哪种，constructor 中第一行必须是 super()；否则 this 不可用，且浏览器拒绝构造实例
声明 observedAttributes 并实现 attributeChangedCallback
继承只是基础，真正启用“属性拦截”的是显式声明 + 回调配合：
- 在类中添加静态 getter：static get observedAttributes() { return ['disabled', 'value', 'label']; }
- 实现回调方法：attributeChangedCallback(name, oldValue, newValue)，在里面更新 shadow DOM、同步内部状态或触发事件
- 注意：只有出现在 observedAttributes 数组里的属性，修改才会触发该回调；布尔属性（如 disabled）的 newValue 可能为 null 或 ""，需按语义判断是否启用
利用内置类的属性代理（而非重写）
当你继承 HTMLInputElement、HTMLButtonElement 等时，浏览器已为你实现了属性与 DOM 特性的双向绑定。你无需手动监听 value 变化，因为：
立即学习“前端免费学习笔记（深入）”；
-
this.value = 'xxx' 会自动同步到
getAttribute('value')（如果未被移除） - el.setAttribute('value', 'yyy') 也会自动触发 this.value 更新，并可能影响渲染或表单提交行为
- 此时，attributeChangedCallback 仍可捕获该变化，但更推荐优先使用原生属性访问器，保持语义一致性
避免常见失效陷阱
很多“拦截失效”其实源于注册或使用方式错误：
- 用
<my-input></my-input>扩展 HTMLInputElement？不行——必须用<input is="my-input">并注册时传{ extends: 'input' } - 忘记
extends配置项？is属性完全无效，元素仍是普通 HTMLUnknownElement - 在 constructor 里读取
this.value？此时元素尚未连接 DOM，值可能为空或未初始化，应移到connectedCallback中处理 - 试图运行时切换
is值？HTML 规范禁止，改了也不触发类替换或原型重绑定
