自治型自定义元素是唯一可行方案，需用attachinternals()并手动实现dom结构、事件监听、值同步与验证代理；内部必须封装真实，name属性透传，动态字段需独立管理internals，reset时须手动同步状态。
自定义元素必须是自治型，不能 extends="input"
Chrome 100+ 已禁用 customized built-in elements，Firefox 和 Safari 基本不支持 class MyInput extends HTMLInputElement。你写 is="my-input" 或 extends: 'input'，现代浏览器要么静默降级，要么抛 NotSupportedError。这不是写法问题，是能力被移除。
真正能落地的路径只有一条：自治型自定义元素（autonomous custom element） + attachInternals()。所有 DOM 结构、事件监听、值同步、验证代理都得自己实现。
-
attachInternals()必须在constructor中调用，且只能调用一次 - 内部必须封装一个真实
<input>（或其他原生控件），否则无法参与原生验证管线 - 表单提交时，该元素不会自动进入
FormData，除非你显式调用this.internals.setFormValue()
动态生成字段时，每个实例都要独立管理 internals 和 value
如果你用同一个自定义元素类生成多个字段（比如循环渲染 <my-input name="email"></my-input>），每个实例的 this.internals 是隔离的，但容易漏掉关键初始化步骤。
常见错误现象：form.elements 能拿到元素，但 form.submit() 提交时值为空；或者多个字段共用同一个内部 <input> 引用，导致值互相覆盖。
- 每次
connectedCallback都要重新查询子<input>，不能缓存到类属性上（避免跨实例污染） -
name属性必须透传给内部<input>，否则FormData不识别该字段 - 监听
input或change事件后，必须调用this.internals.setFormValue(value)，而不是直接改this.value
验证逻辑不能靠 required/pattern 属性自动生效
<my-input required pattern="[0-9]{3}"></my-input> 中的 required 和 pattern 只是普通 HTML 属性，浏览器根本不会触发约束验证——因为 my-input 不是可约束元素（constraint validation API 不识别它）。
你必须手动把属性同步到内部 <input>，并代理 checkValidity()、reportValidity()、setCustomValidity() 等方法。
- 在
attributeChangedCallback中监听required、pattern、min等变化，并同步到内部<input> -
reportValidity()方法需返回this.input.reportValidity()的结果，否则外部调用会失败 - 异步校验（如用户名唯一性）必须清空旧状态：
this.input.setCustomValidity('')，再根据响应设新文案
动态插入/移除字段时，form.reset() 不会重置自定义元素
原生 <form></form> 的 reset() 方法只重置原生控件。如果你动态添加了多个 <my-input></my-input>，调用 form.reset() 后，它们的 UI 和内部 <input> 值可能不同步——UI 还显示旧值，但内部 <input> 已清空。
这是最容易被忽略的兼容性断点：没人告诉你 reset 事件不会冒泡到自定义元素，也没人告诉你需要自己监听 reset 并手动恢复状态。
- 在
connectedCallback中为this.form（如果存在）绑定reset事件 - 在 handler 中调用
this.input.value = ''+this.internals.setFormValue('') - 若字段支持默认值（如
value="abc"），需从 attribute 读取并还原，不能只清空
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
