HTML自定义元素无法直接使用required/pattern等原生验证属性，因其不被约束验证API识别；必须封装原生input，通过属性透传、方法代理（如reportValidity）、validity状态桥接及formAssociated接口实现完整验证能力。
HTML 自定义元素（Custom Elements）本身不提供表单验证能力，无法直接替代 checkValidity() 或接管 setCustomValidity() 的底层行为；真正可行的路径是：用自定义元素封装原生 <input>，再通过 Shadow DOM + 属性反射 + 事件代理完成验证逻辑的集中控制。
为什么不能直接在自定义元素上用 required 或 pattern
浏览器只对原生表单控件（<input>、<select>、<textarea>）执行约束验证。当你写 <my-input required></my-input>，required 只是个普通 HTML 属性，不会触发任何校验——my-input 不是可约束元素（constraint validation API 不识别它）。
- 即使你在自定义元素内部创建了
<input>，也必须把required、pattern等属性显式同步到那个内部<input>上，否则无效 -
my-input.reportValidity()会报错：该方法不存在；你得自己实现并调用内部input.reportValidity() -
my-input.checkValidity()同样不可用，必须手动读取内部input.validity并返回布尔值
如何让 <my-input> 支持原生验证 API
核心是「属性透传 + 方法代理 + validity 状态桥接」。以下是最小可行封装逻辑：
class MyInput extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>:host { display: block; } input { width: 100%; }</style>
<input type="text">
`;
this.input = this.shadowRoot.querySelector('input');
// 同步 attributes 到内部 input
['required', 'pattern', 'minlength', 'maxlength', 'type'].forEach(attr => {
if (this.hasAttribute(attr)) {
this.input.setAttribute(attr, this.getAttribute(attr));
}
});
// 代理 reportValidity / checkValidity
this.reportValidity = () => this.input.reportValidity();
this.checkValidity = () => this.input.checkValidity();
// 暴露 validity 对象（只读副本）
Object.defineProperty(this, 'validity', {
get: () => this.input.validity,
enumerable: true
});
}
// 属性变更时同步
static get observedAttributes() { return ['required', 'pattern', 'minlength', 'maxlength', 'type']; }
attributeChangedCallback(name, _, newValue) {
if (newValue === null) {
this.input.removeAttribute(name);
} else {
this.input.setAttribute(name, newValue);
}
}
}
customElements.define('my-input', MyInput);
- 必须手动监听
observedAttributes，否则改required属性不会更新内部input -
validity是只读对象，不能直接赋值；需用Object.defineProperty暴露 getter - 若需支持
setCustomValidity()，必须在内部input上调用，并在my-input上暴露同名方法
自定义元素里怎么处理异步验证（如用户名查重）
原生验证 API 不支持 Promise，所以不能把 async 校验塞进 setCustomValidity()。正确做法是：禁用原生提交验证（加 novalidate），在 submit 事件中手动调用异步校验，并用 setCustomValidity() 设置结果。
立即学习“前端免费学习笔记（深入）”；
- 在
my-input内部监听blur或input，发起查重请求，成功后调用this.input.setCustomValidity('')，失败则设错误消息 - 注意：每次调用
setCustomValidity()前必须先清空，否则后续校验会被上次残留状态干扰 - 表单级提交时，不能只依赖
form.checkValidity()，要额外检查所有异步验证字段的input.validationMessage是否为空 - 若用户快速连续输入，需用 AbortController 取消前序请求，避免旧响应覆盖新状态
容易被忽略的兼容性与陷阱
自定义元素封装表单控件最大的坑不在 JS，而在表单提交行为和 CSS 伪类继承：
-
:valid和:invalid伪类只作用于原生可约束元素，不会穿透 Shadow DOM；你得在 shadowRoot 里给input写样式，或用part属性暴露 slot - 表单提交时，
<my-input name="email"></my-input>默认不会提交任何 value——必须在自定义元素里实现formAssociated: true并注册ElementInternals（Chrome 95+、Firefox 111+ 支持） - 没启用
formAssociated时，<form>的form.elements列表里根本找不到my-input，FormData也拿不到它的值 - 移动端 Safari 对 Shadow DOM 中
input的 focus/keyboard 行为仍有偶发异常，建议 fallback 到 light DOM 封装方案
真正想用自定义元素做表单验证，别绕开 ElementInternals——它才是让自定义控件成为“一等公民”的关键，但目前仍需谨慎评估目标浏览器支持度。
