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

[rwaskiewicz]

Hey @thijsw 👋

Thanks for the detailed reproduction case! Can you do me a favor and provide the exact build steps you're using here/how you're running the project in the README of the repo for the team to take a look at? Thanks!

[thijsw]

Thank you for your quick reply, @rwaskiewicz

First a small correction: I observed the hyphens being removed in the Chrome's developer tools but when I inspect the actual html that is sent to the browser I see that the attributes are actually sent in camel case.

Steps to run the project (using yarn workspaces):

$ git clone git@github.com:thijsw/stencil-vue.git
$ cd stencil-vue
$ yarn install
$ yarn workspace stencil-library build
$ yarn workspace vue-library build

Run Vue 3 and/or Nuxt 3:

$ yarn workspace vue3-app serve  # check the output at http://localhost:8080/
$ yarn workspace nuxt-app dev # check the output at http://localhost:3000/

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!

[rwaskiewicz]

Going to move this to stencil-ds-output-targets as it pertains to the framework wrappers for Vue

[guilhermebc]

same here on Vue 3 SPA, any news?