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

Question

我刚刚遇到了一个有趣的情况，我<button>在放置在<form>.

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

我也有一个<button>作为<form>.

孩子<button>导致表单提交。

但是<button>在 shadow-root 中没有。

在某种程度上，我想这是有道理的。但是有没有人想出一种方法来告诉 shadow-root<button>正常工作，<form>或者这是我必须通过 JS 处理的事情？

我知道单击事件在 Shadow DOM 层被阻止，但我很惊讶没有办法让按钮仍然是表单的一部分，可以通过属性或属性设置的东西。

当然，我可以捕获点击事件，然后从中发送一个新的事件，this但这不会做同样的事情，因为我的事件将不再是用户生成的，并且有大量与之相关的规则。

Answer 1

无论如何，你都必须通过 Javascript 来处理它。

<button>一个简单的解决方案是在 light DOM 中添加一个（屏蔽的） ，并将click事件传输给它。

customElements.define( 's-button', class extends HTMLElement {
    connectedCallback() {
        this.attachShadow( {mode: 'open'})
            .innerHTML = `<button>In Shadow</button>`
        var submit = this.appendChild( document.createElement( 'button' ) )
        this.onclick = () => submit.click()
    }
} )

<form onsubmit="console.log('submitted');return false">
    <s-button>Select</s-button>
    <button>Outside</button>
</form>