shadow-dom - 我可以在 Shadow DOM 中获得一个按钮来提交不在 Shadow DOM 中的表单吗？

Question

我刚遇到一个有趣的情况，我有一个提交 <button>放置在 <form> 内的 native 自定义元素的 Shadow DOM 内.

  <form id="one" action="" method="get">
    <s-button>Select</s-button>
      #shadow-root
        <button>...</button>
    <button>Outside</button>
  </form>

我也有 <button>作为 <form> 的直接 child .
child <button>导致表单提交。
但是 <button>在影子根没有。
在某种程度上，我想这是有道理的。但是有没有人想出一种方法来告诉 shadow-root <button>与 <form> 一起正常工作或者这是我必须通过 JS 处理的事情？
我知道在 Shadow DOM 层阻止了单击事件，但我很惊讶没有办法让按钮仍然是表单的一部分，可以通过属性或属性设置的东西。
当然我可以捕获点击事件，然后从 this 发送一个新的事件但这不会做同样的事情，因为我的事件将不再由用户生成，并且有大量与之相关的规则。

Answer 1

一个按钮触发 submit Event (在 FORM 元素上)
由于 Events 不能通过 shadow DOM 边界(不要冒泡到父 DOM 中)
我认为这就是为什么 FORM 元素没有接收到 shadowDOM 按钮(调度 submit 事件)的原因。
需要 Supersharps 解决方法，在 light DOM 中使用隐藏按钮(然后在父 DOM 中调度 submit 事件)
或者(从轻量 DOM 开始)您找到(父)FORM 标签并自己发送一个提交事件:this.closest('FORM').dispatchEvent(new Event('submit'))
关注 shadowDOM 和 FORMs 专家:https://github.com/w3c/webcomponents/issues/187

customElements.define( 'my-button', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode:'open'}).innerHTML=`<button>Button In Shadow DOM</button>`
    this.onclick = _ => this.closest('FORM').dispatchEvent(new Event('submit'))
  }
})

<form onsubmit="return console.log('submit Event occured')">
    <my-button></my-button>
    <button>button in Document DOM</button>
</form>

嵌套 shadowDOM
如果 FORM 不是直接祖先，您可以使用以下内容找到它: How to reference to a method in parent component from child component with vanilla JS Web Components? (Not any framework or Library)