html自定义元素通过显式契约（如value属性、change事件、validate方法）实现“面向接口编程”，关键在于强制约束输入/输出边界，而非语法interface；需统一命名、行为与返回值，并用运行时断言验证兼容性。
HTML 本身不支持“面向接口编程”，但通过自定义元素（customElements.define）+ 显式契约设计，你可以让组件行为像实现了接口一样：调用方只依赖 value、disabled、change 这类标准化成员，不关心内部实现。关键不是语法上有没有 interface 关键字，而是你是否强制约束了输入/输出边界。
怎么定义一个“接口兼容”的自定义元素
所谓“面向接口”，本质是约定一套最小、稳定、语义明确的对外契约。比如所有输入类组件都该有 value 属性、input 事件、reportValidity() 方法——哪怕底层是 <input>、<textarea></textarea> 或 canvas 绘制的虚拟键盘，只要满足这三点，就能被表单系统或父组件统一处理。
- 只暴露语义化属性：
value（受控值）、disabled（用this.hasAttribute('disabled')判断）、required、name；别暴露isFocused、hasError这类状态镜像 - 事件命名统一：
change表示值已提交，input表示值正在变化，invalid表示校验失败——不叫onValueChange或data-updated - 方法签名一致：
focus()、blur()、reset()必须存在且行为可预测；validate()统一返回Promise，即使当前同步
attributeChangedCallback 里为什么不能直接更新 DOM
浏览器可能在一次解析中批量设置多个属性（比如 SSR 注入或 JS 批量赋值），如果每个变更都立刻触发 DOM 操作，会引发多次重排重绘，还容易和组件初始化逻辑冲突。更麻烦的是，若你在回调里调 this.setAttribute('value', ...)，会再次触发自身，形成死循环。
- 用
Promise.resolve().then(() => { /* 合并更新 */ })推迟到微任务末尾，自动合并连续变更 - 对字符串类属性（如
format）做浅比较：if (oldValue === newValue) return - 避免在回调里读写同一属性（如监听
value又设置value）
如何验证组件是否真的“接口兼容”
别靠人眼检查文档，用最小运行时断言来卡住契约。例如写个测试片段，把你的组件和原生 <input type="text"> 交换使用，看表单提交、form.reportValidity()、form.requestSubmit() 是否行为一致。
- 检查是否存在必需属性：
el.hasAttribute('value')不重要，但el.value读写必须有效且同步 - 监听事件是否冒泡：
change事件需可被<form></form>捕获，且event.target是组件自身 - 方法调用后状态是否可观察：调
el.focus()后，document.activeElement === el应为true
真正难的不是写出符合接口的组件，而是守住边界——当产品提需求要加个 highlightColor 属性时，得判断它是否破坏了“输入控件”的语义一致性；当工程师想优化渲染性能偷偷缓存 DOM 节点时，得确认没绕过 attributeChangedCallback 的契约流程。接口的价值，永远在约束力里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
