Re: [WICG/webcomponents] Form-associated custom elements: being a submit button (#814)

Be warned, it's not enough to just `form.submit()`. We also need a way to signal which button invoked the submit in order for `<form method=dialog>` to work properly. 

I'm currently working around that, but I'm hitting a bit of a wall. `requestSubmit(this)` won't on my Autonomous HTMLElement:

>Uncaught TypeError: Failed to execute 'requestSubmit' on 'HTMLFormElement': The specified element is not a submit button.
    at HTMLButtonElement.<anonymous>

And `requestSubmit(this.buttonElement)` won't work because `buttonElement` is part of a nest shadow DOM.

>Uncaught DOMException: Failed to execute 'requestSubmit' on 'HTMLFormElement': The specified element is not owned by this form element. at HTMLButtonElement.<anonymous>

I can't use Customized HTML Elements because `Safari`. That just leaves creating a clone of the submit button as a child of the form that's hidden with identical values and then assigning it to that.

Very hacky solution:

````js
const duplicatedButton = this.buttonElement.cloneNode();
duplicatedButton.hidden = true;
form.append(duplicatedButton);
form.requestSubmit(duplicatedButton);
duplicatedButton.remove();
````

The `<dialog>` that's associated with the form will now properly reflect the `value` within `HTMLDialogElement.returnValue`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/814#issuecomment-1218452137
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/814/1218452137@github.com>