Stencil JS中带ShadowDOM的自定义提交按钮表单回车提交问题

针对带ShadowDOM的<my-button type="submit">无法触发表单回车提交的问题，这里提供一个兼容Safari的Stencil实现方案，核心思路是在自定义组件的ShadowDOM内部嵌入一个隐藏的原生<button type="submit">，让表单能识别到提交控件，同时保持自定义按钮的外观和交互。

实现步骤与代码 #

1. 组件代码实现 #

import { Component, Element, h, Listen, Prop } from '@stencil/core';

@Component({
  tag: 'my-button',
  shadow: true,
})
export class MyButton {
  @Element() el: HTMLElement;
  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
  
  private nativeSubmitButton?: HTMLButtonElement;

  componentDidLoad() {
    // 将内部原生按钮与宿主所在的表单关联
    if (this.type === 'submit' && this.el.form) {
      this.nativeSubmitButton!.form = this.el.form;
    }
  }

  @Listen('click')
  handleClick() {
    // 点击自定义按钮时触发原生提交按钮的点击
    if (this.type === 'submit' && this.nativeSubmitButton) {
      this.nativeSubmitButton.click();
    }
  }

  render() {
    return (
      <div class="my-button">
        {/* 隐藏的原生提交按钮，用于触发表单提交 */}
        {this.type === 'submit' && (
          <button
            ref={(el) => this.nativeSubmitButton = el as HTMLButtonElement}
            type="submit"
            style={{
              position: 'absolute',
              opacity: 0,
              pointerEvents: 'none',
              width: 0,
              height: 0,
            }}
          />
        )}
        {/* 自定义按钮的可见内容 */}
        <slot />
      </div>
    );
  }
}

2. 基础样式补充（可选） #

给自定义按钮添加基础样式，保证交互体验与原生按钮对齐：

.my-button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
  user-select: none;
}

.my-button:hover {
  background-color: #e0e0e0;
}

方案说明 #

• 原生按钮关联表单：通过componentDidLoad钩子获取宿主元素所在的表单，将内部隐藏的原生提交按钮与该表单绑定，让表单能识别它为提交控件，输入框按下回车键时会自动触发表单onsubmit事件。
• 点击事件代理：自定义按钮的点击事件会触发内部原生按钮的点击逻辑，确保点击自定义按钮时也能正常提交表单。
• 兼容性：完全基于原生Web API和Stencil特性实现，无需依赖is属性，兼容Safari及其他主流浏览器。

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