Web组件自定义元素表单元素提交

Question

我正在处理一个由自定义元素组成的表单。表格应该在我点击按钮时提交。我在自定义元素之间的通信方面遇到了一些问题。当我点击按钮时，它会调用表单提交，但onsubmit函数不会被调用，警报也不会出现。你能帮我吗？

<form-element action="" method="POST">
<textfield-element name="number" validation="[0-9]+"> </textfield-element>
<textfield-element name="subject"> </textfield-element> 
<button-element> Send </button-element>
element</button> -->
</form-element>

class ButtonElement extends HTMLElement {
constructor() {
super();
this.onclick = () => {
const form = this.closest('form');
form.submit();
}
}
}
window.customElements.define('button-element', ButtonElement)

class FormElement extends HTMLElement {
constructor() {
super();
this.formNode = this.shadowRoot.querySelector('form')
for (let i = 0; i < this.childNodes.length; i++) {
if(this.childNodes[i].localName === 'textfield-element' || this.childNodes[i].localName === 'button-element'){
this.formNode.appendChild(this.childNodes[i])
}
}
this.onsubmit = () => {
alert('hey')
}
}
}
window.customElements.define('form-element', FormElement)

Answer 1

您是否试图在<form-element>的影子DOM中找到一个<form>this.closest('form');？你必须做一些类似this.closest('form-element').shadowDOM.querySelector('form')的事情才能做到这一点。除此之外，您在表单上调用submit()的解决方案应该可以工作。不过，我不喜欢这个解决方案，因为当以编程方式提交时，表单不会发出SubmitEvent。作为使用组件的开发人员，我希望表单发出该事件。我认为不使用它是一个相当严重的限制，而且可能很难弄清楚。

查询表单以在其上调用submit()是我所知道的3种解决方案之一。最明显的是在<button-element>中使用<button type="submit">，但不能使用shadow DOM，这会阻止点击事件到达表单。我看到的另一个解决方案非常棘手：当点击<button-element>时，在shadow DOM之外创建一个按钮，以编程方式点击并删除它。