shadow dom 中 form 属性无效，因设计隔离导致跨 boundary 查找不被支持；需改用显式数据采集+手动提交，或由 shadow host 承载表单逻辑。
form 属性在 Shadow DOM 中根本不起作用
它不会穿透 Shadow Boundary。哪怕你在 Shadow Root 里写 <input form="myform">，只要 myform 在 light DOM（主文档）中，浏览器就视而不见——form 属性被静默忽略，input.form 返回 null，也不会出现在 form.elements 里。
原因很直接：Shadow DOM 的设计目标就是隔离，而 form 属性的解析发生在 DOM 树遍历阶段，它只查同文档、同树（light DOM 或同一 Shadow Tree）内的 <form id="..."></form>。跨 Boundary 查找不被支持，也没有规范定义这种行为。
- Chrome/Firefox/Safari 都一致不支持跨 Shadow DOM 的
form属性绑定 -
<fieldset form="..."></fieldset>同样失效 —— 它只是批量委托子控件，但委托目标仍必须在同一个 DOM 树内 - 即使把
<form id="myform"></form>也放进同一个 Shadow Root，只要不是同一 Shadow Root 实例（比如不同 custom element 的 shadow），依然无效
想让 Shadow 内部控件提交到外部表单？别碰 form 属性
硬写 form="xxx" 不仅无效，还会制造调试幻觉：开发者工具里能看到属性存在，但 submit 事件不触发、FormData 里没有字段、form.requestSubmit() 也收集不到值。
真正可行的路径只有一条：放弃语义绑定，改用显式数据采集 + 手动提交。
- 在 Shadow 内部监听输入变化或提交动作（如按钮 click），用
querySelectorAll('[name]')拿到所有带name的控件 - 逐个读取
.value、.checked、.files等，手动构造键值对 - 调用外部
<form id="myform"></form>的requestSubmit()，或直接用fetch()发送数据 - 注意：如果外部表单用了
enctype="multipart/form-data"，就得用FormData构造并 append 文件项，不能只拼 URLSearchParams
delegatesFocus 和 form 属性无关，但它能帮你聚焦
delegatesFocus: true 解决的是键盘导航断点问题，不是表单归属问题。它只影响焦点流向：当用户 Tab 到 Shadow Host 元素时，自动把焦点交给 Shadow 内第一个可聚焦元素（比如 <input>）。但这不改变该 input 属于哪个表单 —— 它仍然游离在任何 <form></form> 之外，除非你用 JS 显式关联。
- 必须在
attachShadow({ delegatesFocus: true })时声明，之后无法修改 - 内部
<input>必须可聚焦（没设disabled、没设tabindex="-1"）才能被委托到 - 它和
form属性完全正交：一个管“谁来获得焦点”，一个管“提交时算谁的数据”
替代方案：把表单逻辑提到 Shadow Host 层
最稳的做法，是让自定义元素自己承载表单语义，而不是让内部控件“跨出去”。例如：
<my-form><input slot="field" name="username"><button type="submit" slot="submit">提交</button> </my-form>
在 my-form 的 connectedCallback 里创建 <form></form> 并插入 Shadow Root，再把 slot 内容迁入其中。这样所有控件天然在同一个表单上下文里，form.elements 自动生效，submit 事件也能正常冒泡。
关键点在于：Shadow DOM 隔离的是样式和结构，不是逻辑。表单提交逻辑完全可以由宿主元素统一收口，不需要把 input 塞进 light DOM 来“骗过”浏览器。
真正容易被忽略的，是很多人试图用 form 属性绕过 Shadow DOM 隔离，结果卡在浏览器根本不解析这层关系 —— 它不是兼容性问题，是设计边界问题。
