直接用 customelements.define() 注册继承 htmlelement 的类可创建真正封装、可复用、带生命周期的自定义输入组件；contenteditable 无法触发 input 事件、不参与表单序列化、无障碍弱、不支持 formdata 和验证 api；必须满足继承 htmlelement、标签含连字符、先定义后注册三条件；启用 formassociated = true 并调用 attachinternals() 才能接入原生表单。
直接用 customElements.define() 注册一个继承 HTMLElement 的类，就能做出真正封装、可复用、带生命周期的自定义输入组件——不是靠 div + contenteditable 模拟，也不是靠 Angular/Vue 封装器绕行。
为什么不能只用 contenteditable 模拟输入框
它看起来像输入框，但本质是富文本容器：不触发 input 事件、不参与表单序列化（form.elements 里没有它）、无法被 label[for] 关联、无障碍支持弱（role="textbox" 和 aria-* 要手动补全），而且在 Safari 中 oninput 延迟严重。更关键的是，它无法和原生 FormData、checkValidity()、reportValidity() 对接。
如果你只是临时加个 placeholder 效果或禁用回车，contenteditable 可以凑合；但要做表单验证、受控值管理、与 Angular/React 表单集成，这条路会越走越卡。
customElements.define() 必须满足的三个硬条件
浏览器只认符合规范的自定义元素：
- 类必须继承
HTMLElement（不能是普通 class 或 React 组件） - 标签名必须含连字符，例如
my-input、date-range-picker，myinput会被拒绝注册 - 必须在调用
customElements.define()前完成类定义，且不能重复注册同名标签
常见错误：Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used —— 多次刷新页面时没做重复注册防护，建议加一层 if (!customElements.get('my-input')) 判断。
如何让自定义输入组件真正“接入”表单
核心是实现 formAssociated = true 并正确处理表单 API：
- 在类中声明
static formAssociated = true - 构造函数里调用
this.internals_ = this.attachInternals()（注意下划线是命名习惯，非强制） - 重写
valuegetter/setter，并在 setter 中调用this.internals_.setFormValue(value) - 实现
checkValidity()和reportValidity()，内部调用this.internals_.checkValidity() - 监听原生事件（如
input、change）并同步更新internals_.setFormValue()
示例片段：
class MyInput extends HTMLElement {
static formAssociated = true;
constructor() {
super();
this.internals_ = this.attachInternals();
this.input = document.createElement('input');
this.input.type = 'text';
this.appendChild(this.input);
this.input.addEventListener('input', () => {
this.internals_.setFormValue(this.input.value);
});
}
get value() { return this.input.value; }
set value(v) {
this.input.value = v;
this.internals_.setFormValue(v);
}
}
这样注册后，<my-input name="username"></my-input> 就能出现在 form.elements.username 里，也能被 form.requestSubmit() 正常收集。
Shadow DOM 里样式隔离但事件穿透需小心
用 this.attachShadow({ mode: 'closed' }) 确实能防止外部 CSS 泄露，但也会让 label[for] 失效（因为 for 查找的是全局 ID）。解决办法只有两个：
- 不用
for，改用<label>用户名<my-input></my-input></label>包裹结构（推荐） - 在 Shadow DOM 内部手动创建一个
<input>并暴露其id，再把 label 的for指向它（但需确保 ID 全局唯一，建议用Math.random().toString(36).substr(2, 9)生成）
另外，focus() 方法默认不会透入 Shadow DOM，需要显式调用 this.shadowRoot.querySelector('input').focus()，否则用户按 Tab 键无法聚焦到内部输入框。
真正难的不是写出来，而是让 my-input 在各种表单上下文（FormData、HTMLFormElement、checkValidity()、reset()、甚至第三方库的表单绑定）里行为一致。很多项目卡在「看起来能用」和「真正在生产表单里可靠」之间，差的就是 attachInternals() 和对表单生命周期的完整覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
