继承HTMLFormElement的自定义表单元素无法触发submit事件

嘿，我帮你找到了问题的核心，咱们一步步来修复：

1. 最关键的错误：自定义内置元素的使用姿势不对 #

你注册的是扩展原生<form>的自定义元素（通过{ extends: 'form' }这个参数），这种类型的自定义元素不能直接用<my-form>标签来写！正确的用法是用原生<form>标签，再加上is属性来指定它是你的自定义元素：

<form is="my-form">
  <p><input type="text" value="Whoa!" /></p>
  <p><button type="submit">Submit</button></p>
</form>

之前你用<my-form>的话，浏览器会把它当成一个普通的自定义元素（完全和原生form没关系），自然不会触发原生的submit事件，你的监听器也就永远不会被调用啦。

2. 顺手优化：事件绑定的this指向 #

另外，在构造函数里绑定事件的时候，this.mySubmit的this指向可能会出问题（虽然这次submit事件的目标就是form本身，影响不大，但好习惯得保持），建议用bind或者箭头函数固定上下文：

constructor() {
  super();
  // 绑定this，确保mySubmit里的this永远指向你的自定义元素实例
  this.addEventListener('submit', this.mySubmit.bind(this));
  // 或者用箭头函数的写法
  // this.addEventListener('submit', (e) => this.mySubmit(e));
}

3. 修正后的完整代码 #

JavaScript部分 #

class MyForm extends HTMLFormElement {
  constructor() {
    super();
    // 绑定事件并固定this
    this.addEventListener('submit', this.mySubmit.bind(this));
  }

  mySubmit(e) {
    // 一定要加这个！阻止原生提交刷新页面，不然你看不到控制台日志
    e.preventDefault();
    console.log('mySubmit was called');
  }

  connectedCallback() {
    console.log('Custom form element added to page.');
  }
}

// 注册扩展原生form的自定义元素
customElements.define('my-form', MyForm, { extends: 'form' });

HTML部分 #

<!DOCTYPE html>
<html lang="de-DE">
<head>
<title>My Form</title>
<meta charset="utf-8">
<!-- 去掉async！异步加载的话，元素解析时脚本还没加载，注册不及时 -->
<script src="myform.js"></script>
</head>
<body>
<h1>My Form</h1>
<!-- 用原生form + is属性 -->
<form is="my-form">
  <p><input type="text" value="Whoa!" /></p>
  <p><button type="submit">Submit</button></p>
</form>
</body>
</html>

额外提醒 #

• 别用async加载脚本：如果脚本异步加载，HTML解析完了脚本才加载，浏览器会把带is属性的form当成普通form处理，后续也不会自动升级成你的自定义元素，所以同步加载或者用defer更稳妥。
• 阻止默认提交行为：不加e.preventDefault()的话，点击提交按钮页面会直接刷新，控制台的日志瞬间就没了，根本看不到效果。

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