Problem with camelCased event names on WebComponents (CustomElements)

nosfair-fma commented 2 years ago

Vue version

3.2.37

Link to minimal reproduction

https://github.com/nosfair-fma/nuxt3-stencil-interop

Steps to reproduce

run "yarn bootstrap && yarn dev"
open "http://localhost:3000"
preferably, open dev-tools
click the button that says "click to raise events"

What is expected?

an event for the "lowercaseevent" should be raised and logged to the console through the "@event" bound handler
an event for the "camelCaseEvent" should be raised and logged to the console through the "@event" bound handler
an event for the "camelCaseEvent" should be raised and logged to the console through the native "Element.addEventListener" bound handler

What is actually happening?

the lowercase event works
the camelCase event does not work with the "@event" syntax
the camelCase event does get logged for the "native eventListener" (to prove that it is raised and generally working, but also to show the details of the CustomEvent that is emitted)

since i was not able to find any information about naming restrictions (quite the opposite, camelCase event names seem to be standard, widely used and even advertised on the respective vue documentation), i consider this a bug

System Info

System:
    OS: Linux 5.13 elementary OS 6.1 Jólnir
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 23.09 GB / 31.16 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash

Any additional comments?

the web component in qustion is built with StencilJS, it's functionality is confirmed to work outside of VueJs scopes
i am using nuxt, but i am pretty certain that this is vue-related since the event binding is a documented vue feature - if not, i am sorry
all necessary code is to be found in nuxt-app/app.vue

lidlanca commented 2 years ago

check if this may be related https://github.com/vuejs/core/issues/5401

if it is, there are work arounds suggested in comments.