必须使用自治型自定义元素配合 attachInternals() 和 formAssociated: true 才能实现可表单集成的组件，继承 HTMLInputElement 等内置元素已被现代浏览器禁用且无法可靠工作。
不能靠继承 HTMLInputElement 或 HTMLButtonElement 来做可表单集成的组件——这不是写法问题，是浏览器已移除该能力；你真正能落地的路径，只有自治型自定义元素 + attachInternals() + formAssociated: true。
为什么 class MyInput extends HTMLInputElement 会静默失败
Chrome 100+ 已禁用 extends="input" 类型的 customized built-in elements；Firefox 和 Safari 基本不支持。即使代码能跑，也会出现以下现象：
-
customElements.define('my-input', MyInput, { extends: 'input' })在现代 Chrome 中抛NotSupportedError或直接降级为普通元素 - DOM 插入后，
focus()、select()、input事件触发时机与原生input不一致 -
form.reset()不重置该元素值，FormData构建时跳过它 -
is="my-input"写法在 React/Vue/Svelte 中基本不可用，且 IE 完全不识别
如何用自治型元素接入原生表单管线
自治型（autonomous）元素不继承任何内置类，但可通过 attachInternals() “假装”成表单控件，从而被 form.elements 捕获、响应 submit、参与校验 UI。
- 必须在
constructor中调用this.attachInternals()，且只能调用一次 - 注册时必须显式传入
{ formAssociated: true }，否则attachInternals()报错 -
this.internals.setFormValue(value)替代手动设置value属性，才能让FormData收到值 - 需主动监听子
input的input或change事件，并同步调用setFormValue -
this.internals.setValidity({ valid: false }, '错误信息')才能触发:invalid伪类和原生校验提示
attributeChangedCallback 只监听 HTML 属性变更
这个回调对 JS 属性赋值（如 el.checked = true）完全无感，只响应 setAttribute('checked', '')、removeAttribute('disabled') 或初始 HTML 中的 <x-toggle checked></x-toggle>。
立即学习“前端免费学习笔记（深入）”；
- 必须在
static get observedAttributes()中显式声明要监听的属性名，漏写就收不到回调 -
newValue总是字符串，布尔属性（如checked）可能为null或"true"，不能直接=== true - 初始属性值触发时
oldValue是null，别拿它做相等判断 - 若需响应 JS 属性变更，得自己在 setter 中手动触发或同步状态
Shadow DOM 封装与样式隔离的实际代价
用 this.attachShadow({ mode: 'open' }) 能隔离样式和结构，但会带来几个真实约束：
- 无法用外部 CSS 选择器穿透 Shadow DOM，
.my-button:hover对 shadow 内部按钮无效 - slot 分发内容不自动继承父级字体、颜色等 inherited 属性，需显式
inherit或initial - 无障碍属性（如
aria-label）不会自动透传到内部元素，需手动绑定 - 调试时 DOM 树变深，Chrome DevTools 需展开
#shadow-root才能看到内部结构 - 若组件需被第三方 CSS 框架（如 Bootstrap）样式化，就得放弃 Shadow DOM，改用命名空间前缀 + CSS 变量
最常被忽略的一点：表单关联不是“写了 attachInternals() 就自动生效”，而是必须配合 formAssociated: true、手动同步值、主动触发校验三者缺一不可；少一步，formdata 事件里就看不到你的组件值。
