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

如何解决Web组件自定义元素表单元素提交

我正在处理仅由自定义元素构成的表单。当我点击按钮时，应该提交表格。自定义元素之间的通讯存在一些问题。当我单击该按钮时，它调用表单提交，但未调用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)

解决方法

您是否要在<form>的影子DOM中找到一个<form-element> this.closest('form');？您必须执行类似this.closest('form-element').shadowDOM.querySelector('form')的操作。 除此之外，您还可以在表单上调用submit()。我不喜欢这种解决方案，因为以编程方式提交时，表单不会发出SubmitEvent。作为使用您的组件的开发人员，我希望表单能够发出该事件。我认为不使用它是一个非常严重的限制，并且可能很难弄清。

查询表单以调用submit()是我所知道的3个解决方案之一。 最明显的方法是在<button type="submit">内使用<button-element>，但不能使用影子DOM，这会阻止click事件到达表单。我见过的另一种解决方案很笨拙：单击<button-element>时，在影子DOM之外创建一个按钮，以编程方式单击它并将其删除。