Question

我只是遇到一个有趣的情况，我在<button>内放置的本机自定义元素的shadowDOM中有一个<form>提交。

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

我还有一个<button>作为<form>的直接子代。

孩子<button>使表单提交。

但是影子根目录中的<button>却没有。

从某种程度上来说，我认为这很有意义。但是，有没有人找到一种方法来告诉影子根<button>与<form>一起正常工作，还是我必须通过JS处理的事情？

更新

感谢@Supersharp

是的，我知道click事件在shadowDOM层被阻止，但是令我惊讶的是，没有办法允许按钮仍然是表单的一部分，可以通过属性或属性进行设置

当然，我可以捕获单击事件，然后从this发送一个新事件，但这不会做同样的事情，因为我的事件将不再由用户生成，并且与此相关的规则很多

我感到很遗憾的是，当设计Web组件时，设计师没有想到这一点。这似乎是设计中的缺陷。

@Danny，

我认为您的意思是按钮调度click事件，而不调度submit事件。它是调度submit事件的形式。但是您的示例可能更接近我的追求，因为closest仅给了我自己的孩子form。

Answer 1

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

一种简单的解决方案是在轻型DOM中添加一个（屏蔽的）migrate，并将<button>事件传递给它。

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()
    }
} )

Answer 2

按钮触发submit Event（在FORM元素上）

由于事件无法通过阴影DOM边界（不会冒泡进入父DOM）

我假定，这就是FORM元素未接收shadowDOM按钮（调度submit事件）的原因。

需要在轻型DOM中使用隐藏按钮进行Supersharps解决方法（然后在父DOM中调度一个submit事件）

或者（从轻型DOM开始），您找到（父）FORM标记并自己发送一个Submit事件：

this.closest('FORM').dispatchEvent(new Event('submit'))

请关注ShadowDOM和FORM方面的专家，网址为：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中获取按钮以提交不在shadowDom中的表单吗？

2 个答案: