my-input提交时拿不到值是因为未接入表单管线：需声明formassociated: true、调用attachinternals()、并在事件中调用setformvalue()同步值；还需透传验证属性、代理checkvalidity()等方法，并手动调用setvalidity()同步状态。
为什么my-input提交时拿不到值
因为没接入表单管线——浏览器只把原生 <input> 当作可提交控件，my-input 默认是普通元素。即使内部渲染了 <input>，不调用 this.internals.setFormValue()，表单序列化时就完全忽略它。
必须三步齐备：
-
customElements.define('my-input', MyInput, { formAssociated: true })—— 缺少formAssociated: true会导致attachInternals()报错 - 在
constructor中调用this.attachInternals()，且只能调一次 - 在
connectedCallback或事件监听中，显式调用this.internals.setFormValue(value)同步值（比如监听子input的input事件）
如何让my-input支持required和reportValidity()
自定义元素本身不响应原生约束验证 API，required、pattern 这些属性只是静态字符串，不会触发校验逻辑。
正确做法是透传 + 代理：
- 把
required、pattern、minlength等属性手动同步到内部<input>上（监听attributeChangedCallback） - 重写
checkValidity()方法：返回this.input.checkValidity() - 重写
reportValidity()方法：调用this.input.reportValidity() - 重写
setCustomValidity(message)：代理给this.input.setCustomValidity(message)
否则 my-input.reportValidity() 会直接报 TypeError: reportValidity is not a function。
能不能继承HTMLInputElement来省事
不能。Chrome 100+ 已禁用 extends: 'input' 方式，Firefox 和 Safari 基本不支持，customElements.define('my-input', MyInput, { extends: 'input' }) 在现代浏览器里要么静默失败，要么抛 NotSupportedError。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
所谓“继承内置元素”在生产环境已不可靠，唯一稳定路径是自治型自定义元素（autonomous custom element）+ attachInternals()。
常见错误包括：
- 写
<my-input is="my-input"></my-input>——is只对原生标签有效，<my-input></my-input>根本不是可扩展的上下文 - 漏掉
formAssociated: true却还调attachInternals()—— 构造函数里直接报错 - 在
connectedCallback里才调attachInternals()—— 必须在constructor中完成
验证状态怎么同步到样式和无障碍
:valid、:invalid、:required 这些伪类只作用于原生表单控件，不会自动映射到自定义元素上。
要让样式和屏幕阅读器感知状态，得手动桥接：
- 监听内部
input的invalid事件，或轮询input.validity，然后用this.internals.setValidity({ valid: false }, '提示')触发原生校验 UI（如红色边框） - 通过
this.internals.ariaInvalid = 'true'或this.internals.ariaDescribedby = 'error-id'同步 ARIA 属性 - 在 Shadow DOM 中用
:host(:invalid)写样式，但前提是setValidity()被调用过，否则伪类不生效
最容易被忽略的是：不调 setValidity()，光改内部 input 的状态，外部表单和样式都不会响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
