kebab-case events are attached as lower case on web components

[lee-orr]

Version

3.0.4

Reproduction link

https://jsfiddle.net/meo9Lfya/3/

Steps to reproduce

• Open: https://jsfiddle.net/meo9Lfya/3/
• click the "click lower case" button - notice the text to the right of the buttons changes to "Clicked lower"
• click the "click kebab case" button

What is expected?

The text to the right of the buttons should change to "Clicked kebab"

What is actually happening?

The text to the right of the buttons doesn't change

---

To confirm it was an issue with vue binding to the event, I added a "Mount Native Event Listeners" - if you click this button, it'll attach event listeners using addEventListener - and the buttons will both work as expected.

Note - this is utilizing vue 3.0.4, but I was seeing the same issue in 3.0.2 in my project, which relies on Vite.

Also - might be similar to: #2429 - however it's happening on newer versions of Vue...

[shadowings-zy]

That's because the kebab-case custom event foo-bar in web components will parse to foobar. Vue will add foobar as the name of event listener. I think this needs a fix.

[lee-orr]

Thanks for the quick catch/solve! Hopefully it gets into the next release.

[toams69]

What is the state of this PR ?
I am facing the same issue using vue 3.0.5.
I can't catch event from webcomponent having a dash as name.
Even if I am using camelcase instead of keba case

[devmount]

Same here. I'm using Shoelace webcomponents with the current Vue 3.0.5 and can't catch events like sl-show from it.
I've created a minimal working example and also described it at shoelace-style/shoelace#310.

[recamshak]

As a workaround you can replace <sl-form @sl-submit="submit"> with <sl-form v-on="{ 'sl-submit': submit }">. Here is a fix of @devmount example: https://jsfiddle.net/faqp40th/

[devmount]

@recamshak Didn't know about that syntax, it's working, thanks!