Web组件插槽内按钮点击无法提交表单的原因与解决方案

问题 #

期望以下代码中两个“表单”点击<button>时表现一致——点击按钮即可提交对应的<form>，但实际发现：放入Web组件自定义元素<slot>中的按钮无法触发表单提交，而普通表单的按钮可以正常提交。

代码示例 #

HTML代码

<my-form>
  <button name="btn" value="out">OUT</button>
</my-form>
<form>
  Normal form: <button name="btn" value="out">OUT</button>
</form>

<template id="templ-my-form">
  <form>
    Custom element: <slot></slot>
  </form>
</template>

JavaScript代码

customElements.define(
  "my-form",
  class extends HTMLElement {
    constructor() {
      super();
      const templ = document.getElementById("templ-my-form")
      const shadowRoot = this.attachShadow({ mode: "open" })
      shadowRoot.appendChild(templ.content.cloneNode(true))
      
      shadowRoot.querySelector("form").onsubmit = (e) => {
        e.preventDefault()
        console.log("SUBMITTED")
      }
    }
  }
)

document.querySelector('form').onsubmit = e => {
  e.preventDefault()
  console.log("SUBMITTED")
}

原因分析 #

核心问题是DOM上下文隔离：插槽里的按钮属于页面的「Light DOM」，而Web组件内部的<form>属于「Shadow DOM」。浏览器默认规则下，Light DOM中的按钮只会关联到同一DOM层级内的表单，无法穿透Shadow DOM触发内部表单的提交——简单说，按钮和表单不在同一个“管辖范围”，按钮不知道要提交Shadow里的表单。

解决方案 #

方案1：将按钮放在Shadow DOM内部（不使用插槽） #

如果不需要从外部传入按钮，直接在组件模板里定义按钮，让按钮和表单同属Shadow DOM上下文，点击就能正常触发提交：

<template id="templ-my-form">
  <form>
    Custom element: <button name="btn" value="out">OUT</button>
  </form>
</template>

方案2：手动绑定点击事件触发表单提交 #

如果必须通过插槽传入按钮，可以在组件初始化时，监听插槽内按钮的点击事件，手动调用Shadow DOM中表单的提交方法：

customElements.define(
  "my-form",
  class extends HTMLElement {
    constructor() {
      super();
      const templ = document.getElementById("templ-my-form")
      const shadowRoot = this.attachShadow({ mode: "open" })
      shadowRoot.appendChild(templ.content.cloneNode(true))
      
      const form = shadowRoot.querySelector("form");
      form.onsubmit = (e) => {
        e.preventDefault()
        console.log("SUBMITTED")
      };

      // 监听组件内的点击事件，判断目标是否为按钮
      this.addEventListener('click', (e) => {
        if (e.target.tagName === 'BUTTON') {
          form.submit();
        }
      });
    }
  }
)

方案3：用form属性关联按钮与表单 #

给Shadow DOM里的表单设置唯一id，然后给插槽中的按钮添加form属性，值为表单的id，强制关联两者：

<my-form>
  <button name="btn" value="out" form="custom-inner-form">OUT</button>
</my-form>

<template id="templ-my-form">
  <form id="custom-inner-form">
    Custom element: <slot></slot>
  </form>
</template>

注意：要确保表单的id在整个页面中唯一，避免和其他元素冲突。

内容的提问来源于stack exchange，提问作者lyfeng