bug: hyphens get removed from multi-word attribute names in a Vue 3 application when using SSR

[thijsw]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.0

Current Behavior

I followed the guide on how to create a Vue component library based on Stencil web components and I consume this package in a Vue 3 application. I'm observing a strange bug when using server-side rendered web components that contain hypens in attribute names.

A component that is written like this:

<my-component first="..." middle-name="..." last="..."  /> 

is being rendered as:

<my-component first="..." middlename="..." last="..."  /> 

The hyphens in multi-word attribute names (defined in the web components in Pascal case) are being stripped and therefore won't work. The problem only occurs in server-side rendered web components. When using client-side web components, or HMR, everything is fine.

Expected Behavior

I am expecting that the attribute names are sent to the browser with the hyphens intact

Steps to Reproduce

I created a monorepo (following the aforementioned guide) to demonstrate the bug. The monorepo contains a minimal stencil library, a minimal vue library and a minimal nuxt 3 and vue 3 application. When you run either the nuxt 3 or vue 3 application, you can observe the bug.

In this commit I changed the middle attribute name to middleName to demonstrate the bug (nuxt 3): https://github.com/thijsw/stencil-vue/commit/7baeb3153e599161928329c16a2c2ff7c93db914

For Vue 3: https://github.com/thijsw/stencil-vue/commit/cff13de38b452220f2f6ea08020cbaad37d783f5

Code Reproduction URL

https://github.com/thijsw/stencil-vue

Additional Information

Edit: added Vue 3 application, not just Nuxt 3