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() 必须在任何元素被解析前完成，且只执行一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
