要让自定义元素深度参与表单逻辑，必须声明formAssociated并早期调用attachInternals()，再手动桥接值与校验、处理焦点与可访问性、派发标准事件，并在封装复杂行为时注意异步更新和reset响应。
要让自定义元素真正具备复杂行为且深度参与表单逻辑，不能只做 UI 封装，必须打通浏览器原生表单机制。核心在于正确接入 formAssociated 生命周期，否则它只是个“长得像表单控件”的普通元素——提交时拿不到值、验证不触发、form.elements 里查无此物。
必须声明 formAssociated 并早期调用 attachInternals()
这是整个流程的起点，缺一不可：
- 在
customElements.define()的第三个参数中显式传入{ formAssociated: true } - 在
constructor()中第一件事就是调用this.attachInternals()，获取ElementInternals实例 - 不能拖到
connectedCallback或更晚才调，否则会抛错：“Failed to execute 'attachInternals' on 'HTMLElement': Cannot attach internals after element is connected” -
this.internals应直接存为实例属性，不要缓存到闭包或外部变量中，避免被垃圾回收
手动桥接表单值与校验状态
原生控件自动同步 value 和 validity，自定义元素得自己写：
- 用
this.internals.setFormValue(value)控制该元素在FormData和form.submit()中提交的值，别用dataset、value属性或自定义方法模拟 - 监听子
<input>的input、change等事件，在回调里调用setFormValue - 校验需配合
setValidity({ valid: false, message: 'xxx' })和checkValidity()，并在必要时调用reportValidity()触发浏览器默认提示 - 若支持多值（如自定义多选器），可传数组给
setFormValue(['a', 'b'])，浏览器会自动序列化为多个同名字段
处理焦点、可访问性与事件流
用户交互体验不能打折，尤其对键盘和屏幕阅读器用户：
- 实现
focus()和blur()方法，并在内部聚焦到真正的输入子节点（如this.querySelector('input').focus()） - 设置合适的 ARIA 属性：
role="combobox"、aria-expanded、aria-controls等，根据组件语义动态更新 - 派发标准事件：如用户输入后派发
input和change事件（注意用composed: true, bubbles: true），让父级能监听到 - 区分用户触发 vs 程序触发：比如通过 JS 设置值时，不要同时触发
input事件，否则可能造成死循环
封装复杂行为时的关键设计点
比如带搜索的下拉、日期范围选择器、评分组件等，需额外注意：
- 把业务逻辑（如字典加载、联动计算、公式解析）放在组件内部，但通过属性或方法暴露控制接口，例如
setData(options)、setRange(start, end) - 若涉及异步操作（如搜索请求），
setFormValue应在数据就绪后调用，避免提交空值或旧值 - 响应
reset事件：监听表单的reset，并在回调中重置自身状态和子控件值 - 避免在
attributeChangedCallback中直接操作 DOM 渲染，应先更新内部状态，再统一触发 render 或同步 setFormValue
