Open Reaper88 opened 1 month ago
+1. I have also searched high and low for the very same thing you are describing. It seems like a big limitation in defineCustomElement to not being able to pass arguments to the underlying CustomElement constructor. In this case attachInternals & static formAssociated properties.
Did you find any solution to your problem?
Sidenote: Here is an older issue (see latest comment) I found, which also adresses some of the same problems.
The only way to bypass this is to set a hidden input with the right name and value thru js but it kinda defeats the purpose of creating a custom element in my opinion.
I think we could have a formAssociated
option in defineCustomElement
, and add that static prop in VueCustomElement
static formAssociated = !!Comp.formAssociated
ElementInternals
should be attached if we want to make it associate with form.
ElementInternals
can also be used to access Accessibility Object Model and Custom Element State. So we should call attachInternals
if supported (Or add another option?)
constructor(initialProps?: Record<string, any>) {
super(Comp, initialProps, hydrate);
if (this.attachInternals) this._internals = this.attachInternals();
}
Then, users can utilize _internals
if they want
But not sure if we should just add formAssociated
as a common component option(for .vue file), I am using this solution for defineCustomElement in tsx only. If that's ok, I can make a PR for this.
For temp solution, check out this, I made some changes based on your demo
I came to the same alternative approach as you @lejunyang. But in my opinion that kind of defeats the purpose of using vue with web components with such a custom solution.
If this is something that won't implement then I think there is an argument that this should be reflected in the docs; https://vuejs.org/guide/extras/web-components. As of today the docs makes it sound "plug and play" when working with web components and vue. Which is to some degree true, but there are lacking functionality.
Vue version
3.4.27
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-ikoo1s?file=src%2Fcomponents%2Fui%2Ftime-picker%2FTimePicker.ce.vue
Steps to reproduce
Choose time and submit form
What is expected?
To have the custom element as a form-associated custom element
What is actually happening?
The element is not taken as part of the form when submitted
System Info
Any additional comments?
I've looked high and low, tried attachInternals() but on the button and a template ref doesn't work either, I'd like to have a way to associate the custom element as a form-associated custom element which we can do in vanilla js. But it's during the creation of the HTMLElement class that you can set it but we cannot modify this with the new defineCustomElement method.