深入理解HTML自定义元素在现代Web中的运用

customElements.define() 是自定义元素生效的必要前提，未调用则组件仅为 HTMLUnknownElement；需设 { formAssociated: true } 并在构造函数 super() 后调用 attachInternals()，属性监听须在 connectedCallback 中初始化，observedAttributes 必须小写连字符，继承内置元素须正确指定 extends 且兼容旧浏览器。

customElements.define() 不是锦上添花的注册动作，而是组件能否被浏览器识别并执行生命周期的生死线。没调用它，my-input 就只是个 HTMLUnknownElement，所有逻辑静默失效。

为什么 my-input 渲染了但表单里拿不到值

这是最常发生的“假成功”：UI看着正常，提交时 form.elements 里查无此元素，后端收不到值。根本原因在于没接入表单参与协议。

• 必须显式声明 { formAssociated: true } —— 缺了这句，this.attachInternals() 直接报错
• this.internals = this.attachInternals() 只能在构造函数中调，且必须在 super() 之后
• 值同步不能靠监听子 input 的 value 属性，得用 input.addEventListener('input', () => this.internals.setFormValue(...))
• 如果子 input 是动态创建的（比如在 connectedCallback 中插入），监听必须等 DOM ready 后再绑定，否则事件挂不上

attributeChangedCallback 为什么改了属性却没反应

这个回调天生“懒”：它只响应 attribute 变更，且首次渲染的属性值不会触发它。很多人写了 static get observedAttributes() { return ['value', 'disabled']; }，但页面加载时 <my-input value="abc"></my-input> 的 abc 根本不进回调。

• observedAttributes 返回的数组必须全小写、带连字符，'data-id' ✅，'datasetid' ❌
• 初始化逻辑（读取初始 value、设置内部 input.value）必须放在 connectedCallback 里兜底
• this.value = newValue 是 property 赋值，不会触发回调；要触发，得用 this.setAttribute('value', newValue)
• 如果组件支持双向绑定（如 Vue 风格），property 和 attribute 同步需手动维护，浏览器不自动桥接

扩展现有 button 或 input 为什么总失败

想给原生 button 加 loading 状态？别写 <loading-button></loading-button>，那根本不是 HTMLButtonElement 实例，width、click()、focus() 全挂掉。

立即学习“前端免费学习笔记（深入）”；

• 必须继承对应内置类：class LoadingButton extends HTMLButtonElement，不是 HTMLElement
• 注册时必须传 { extends: 'button' }，缺一不可
• HTML 中只能写 <button is="loading-button"></button>，is 值必须和 define() 第一个参数完全一致（大小写、连字符）
• 构造函数第一行必须是 super()，否则实例化直接抛 Failed to construct 'HTMLButtonElement'
• 旧版 Safari 对 extends 支持极差，生产环境优先走自治型方案（my-button + attachInternals()）

真正难的不是写出来，是让自定义元素在各种加载时机、框架嵌套、表单嵌套、属性变更路径下行为一致。比如 SSR 渲染后 hydrate、React 动态插入、Shadow DOM 内部再嵌套自定义元素——这些场景下 connectedCallback 触发时机、属性同步节奏、form 关联状态都可能偏移。绕不开的，永远是那个最朴素的动作：customElements.define() 必须在任何元素被解析前完成，且只执行一次。