可行，但必须内部使用原生input[type="checkbox"]并透传所有属性、事件和验证逻辑，确保表单语义、可访问性和响应式同步。
直接用 Web Component 封装自定义开关组件可行，但必须保留 input[type="checkbox"] 的语义和底层行为——否则它就不是“开关”，只是个会变色的 div。
为什么不能用 customElements.define 从零造一个 toggle 元素
浏览器不识别 <my-switch></my-switch> 的表单语义：它不会被 form.elements 收录，form.submit() 不携带值，checkValidity() 不起作用，aria-checked 也得手动同步。更关键的是，屏幕阅读器压根不知道这是个可切换控件，哪怕你加了 role="switch"，没有原生 input 作 backing store，状态变化无法被 AT（辅助技术）可靠捕获。
正确路径是：Web Component 作为容器和样式封装层，内部仍用标准 input[type="checkbox"]，所有属性、事件、验证逻辑都透传或代理到它身上。
- 组件必须接受
name、value、checked、disabled等原生属性，并同步到内部input -
change和input事件必须从内部input冒泡或重派发，不能只监听 click - 不要在 shadow DOM 中用
display: none或visibility: hidden隐藏input——这会让它退出可访问树；应保持opacity: 0; position: absolute; pointer-events: none; - label 关联必须有效：要么把
input放在 shadow DOM 内并用for指向其id（需确保 id 全局唯一），要么用 slot 把label和input都透出到 light DOM
shadowRoot 里怎么写结构才不破坏可访问性
最稳妥的结构是让 input 和视觉滑块都在 shadow DOM 中，但 label 通过 slot 注入，并显式绑定到 input 的 id：
立即学习“前端免费学习笔记（深入）”；
<template>
<style>
:host { display: inline-block; }
input { opacity: 0; position: absolute; pointer-events: none; }
.track { width: 60px; height: 30px; border-radius: 15px; background: #ddd; transition: background 0.2s; }
input:checked + .track { background: #4CAF50; }
.thumb { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: white; transition: transform 0.2s; }
input:checked + .track > .thumb { transform: translateX(30px); }
</style>
<input type="checkbox" id="switch-input">
<label class="track" for="switch-input">
<span class="thumb"></span>
</label>
</template>
注意：for="switch-input" 能生效，前提是该 id 在 shadow DOM 内唯一且未被重复使用。若组件被多次实例化，需动态生成 id（例如用 Math.random().toString(36).substr(2, 9)），否则 label 点击会随机绑定到某个实例的 input 上。
- 避免在 shadow DOM 中用
<slot name="label"></slot>再包裹整个结构——label 若在 light DOM，for属性跨 shadow boundary 无效 - 如果必须支持外部 label（比如 SSR 场景），改用
<label><slot></slot><input></label>结构，把 input 放 light DOM，仅用 shadow DOM 包裹滑块样式 -
tabindex不要加在 host 上——焦点应落在内部input，由浏览器自动管理
如何让 checked 属性响应式并支持表单提交
Web Component 的 checked 属性必须双向同步：既能通过 <my-switch checked></my-switch> 初始化，也能被 JS 修改（el.checked = true），同时反映到内部 input.checked 并触发 change 事件。
关键点是用 attributeChangedCallback 监听 checked 变化，并手动设置 input.checked，再调用 input.dispatchEvent(new Event('change', { bubbles: true })) —— 否则父级 form 不知道状态变了。
- 不要依赖
input.addEventListener('change', ...)来反向更新组件属性：那是用户交互路径；属性变更路径必须独立处理 - 若组件参与
<form></form>提交，确保input.name始终与组件name属性一致（监听nameattribute change 并同步） - SSR 或服务端渲染时，
input的初始checked状态必须由 HTML 属性决定，不能靠 JS 初始化，否则首屏无状态
真正难的不是画个滑块，而是让这个滑块在表单验证、键盘操作（Space/Enter 切换）、屏幕阅读器播报、服务端渲染、跨框架复用等所有上下文中，表现得和原生 checkbox 完全一致——差一点，就不是开关，只是个动画按钮。
