自定义元素是Web Components规范的一部分，允许用JavaScript定义带行为的HTML标签（如<my-input>），通过attachInternals()和formAssociated: true实现表单参与能力，封装验证、样式、事件等逻辑，而非替代原生表单控件。
什么是自定义元素，它和表单组件有什么关系
自定义元素（Custom Elements）是 Web Components 规范的一部分，允许你用 JavaScript 定义带行为的 HTML 标签，比如 <my-input> 或 <form-fieldset>。它不是替代 <input> 或 <select>，而是封装它们——把验证逻辑、样式、事件绑定、无障碍属性（ARIA）打包进一个可复用、可组合、语义清晰的标签里。
关键在于：浏览器原生表单控件（如 <input type="email">）本身不支持直接扩展行为；而自定义元素让你在保留表单参与能力（比如能被 form.elements 捕获、能响应 submit 事件）的前提下，注入业务逻辑。
如何让自定义表单元素真正参与表单提交
很多初学者写的 <custom-input> 看起来像输入框，但点提交时值根本不到后端——因为没实现 formAssociated 接口。这是最常踩的坑：只渲染了 UI，没接入表单生命周期。
必须做三件事：
立即学习“前端免费学习笔记（深入）”；
- 在构造函数中调用
this.attachInternals()，获取ElementInternals实例 - 在
connectedCallback中调用this.internals.setFormValue()更新表单值（例如监听子<input>的input事件） - 显式声明
formAssociated: true在define选项中，否则attachInternals()会报错
示例片段：
class MyTextInput extends HTMLElement {
constructor() {
super();
this.internals = this.attachInternals();
}
connectedCallback() {
const input = this.querySelector('input');
input.addEventListener('input', () => {
this.internals.setFormValue(input.value);
});
}
}
customElements.define('my-text-input', MyTextInput, { formAssociated: true });
为什么不能直接继承内置表单元素（如 HTMLInputElement）
你可能会想写 class MyInput extends HTMLInputElement，然后用 extends="input" ——这在绝大多数浏览器里行不通。Chrome 从 v100+ 开始限制了对内置元素的继承（即“customized built-in elements”），且 Firefox 和 Safari 基本不支持。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
所以现实路径只有一条：自治型自定义元素（autonomous custom elements），也就是自己实现所有 DOM 结构与交互，再通过 attachInternals() 模拟表单参与能力。好处是兼容性好、控制力强；代价是你得手动处理 focus、value、disabled、required 等状态同步。
常见遗漏点：
- 没同步
disabled属性到内部<input>，导致禁用态失效 - 没重写
get value()/set value(v)访问器，导致 JS 脚本读写失败 - 没在
attributeChangedCallback中响应required变化，影响checkValidity()结果
如何避免样式隔离破坏表单一致性
Shadow DOM 能隔离样式，但也容易切断表单默认样式链（比如浏览器对 :valid / :invalid 的伪类支持，或 OS 级别的焦点高亮）。别一上来就套 shadowRoot = this.attachShadow({ mode: 'open' })。
更稳妥的做法：
- 先用 light DOM 构建（即不挂 shadow），验证功能逻辑是否正确
- 等核心表单行为（值同步、验证、提交参与）稳定后，再加 Shadow DOM，并手动透传关键伪类状态：
this.internals.states是只读的，但你可以用this.classList.toggle('invalid', !this.checkValidity())配合外部 CSS - 若需深度定制外观（如圆角 + 图标 + 错误提示区），用
<slot>把用户内容投射进去，而不是完全接管子节点结构
注意：form.elements 只返回 light DOM 中的可表单元素，所以如果你把 <input> 放进 shadow，就必须靠 setFormValue 主动上报，不能指望浏览器自动采集。
复杂点往往不在“怎么写”，而在“什么时候该放弃 Shadow DOM，转而用 class + data-* 属性驱动轻量封装”。表单系统真正的可扩展性，来自接口契约（比如统一暴露 validate()、reset()、reportValidity()），而不是 DOM 封装形式本身。
