Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom elements not able to associate with form #10948

Open
Reaper88 opened this issue May 14, 2024 · 7 comments · May be fixed by #12129
Open

Custom elements not able to associate with form #10948

Reaper88 opened this issue May 14, 2024 · 7 comments · May be fixed by #12129

Comments

@Reaper88
Copy link

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

System:
    OS: Linux 4.18 Rocky Linux 8.9 (Green Obsidian)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 12.06 GB / 23.02 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.4.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.15.3 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: 123.0.6312.122

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.

@Tjaitil
Copy link

Tjaitil commented May 22, 2024

+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.
#vuejs/rfcs#220

@Reaper88
Copy link
Author

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.

@lejunyang
Copy link

lejunyang commented Jun 21, 2024

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

@Tjaitil
Copy link

Tjaitil commented Jun 28, 2024

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.

@Reaper88
Copy link
Author

Any news as to what might happen with this request?

@MichaelHeydon
Copy link

Does 37d2ce5 help at all? I would have assumed not using the Shadow DOM should allow the <form> to pick up the input elements as usual.

@Reaper88
Copy link
Author

I will try but I doubt as the html spec requires it to be a form-associated element using that static property within the class and having the _internals property accessible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants