创建了一个从 HTMLFormElement 派生的自定义 HTML 元素，并在构造函数中添加了“提交”事件的侦听器。该元素已正确注册，但提交处理程序从未被调用...
class MyForm extends HTMLFormElement {
constructor() {
super();
this.addEventListener('submit', this.mySubmit);
}
mySubmit() {
console.log('mySubmit was called');
}
connectedCallback() {
console.log('Custom form element added to page.');
}
}
customElements.define('my-form', MyForm, {
extends: 'form'
});<!DOCTYPE html>
<html lang="de-DE">
<head>
<title>My Form</title>
<meta charset="utf-8">
<!--<script src="myform.js" async="true"></script>-->
</head>
<body>
<h1>My Form</h1>
<my-form>
<p><input type="input" value="Whoa!" /></p>
<p><button type="submit">Submit</button></p>
</my-form>
</body>
</html>正如自定义元素界面的文档中所写，您必须使用属性将自定义元素功能“绑定”到 HTML is=""。
自定义元素之间似乎存在差异：
1）那些使用自己的影子DOM（“独立元素”，“自治元素”），因此被迫扩展HTMLElement（所以不是HTMLFormElement），可以用<my-form>HTML内部的样式编写。
2）对于不扩展HTMLElement但尝试扩展其他内容的自定义元素，例如 a HTMLFormElement，似乎您需要使用<form is="your-defined-name"></form>, (“自定义内置元素”)
class MyForm extends HTMLFormElement {
constructor() {
super();
this.addEventListener('submit', this.mySubmit);
}
mySubmit() {
console.log('mySubmit was called');
}
connectedCallback() {
console.log('Custom form element added to page.');
}
}
customElements.define('my-form', MyForm, {
extends: 'form'
});<!DOCTYPE html>
<html lang="de-DE">
<head>
<title>My Form</title>
<meta charset="utf-8">
<!--<script src="myform.js" async="true"></script>-->
</head>
<body>
<h1>My Form</h1>
<form is="my-form">
<p><input type="input" value="Whoa!" /></p>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>| 归档时间： |
|
| 查看次数： |
975 次 |
| 最近记录： |