Subscribe on changes!

Web Component without props definitions breaks when passed custom attribute like `data-v-xxxxxxx`

avatar
Jun 22nd 2022

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-fs54yz?file=vite.config.js,src%2Fcustom-components%2Findex.js,src%2Fmain.js,src%2FApp.vue,src%2Fcustom-components%2FMessage.ce.vue,src%2FHasScoped.vue&terminal=dev

Steps to reproduce

In The web component element generated after the definecustomelement is defined in the Vue file;

If the style tag in the Vue file contains the scoped attribute, the web component element will fail to resolve. Error: runtime dom esm-bundler. js:547 Uncaught TypeError: Cannot read properties of undefined (reading 'dataV671062ce')。

After removing the scoped attribute of the style tag in the Vue file, the web component is successfully parsed.

App.vue is an example of successful parsing, hasscoped.vue file is an example of parsing failure.

What is expected?

The scoped style tag in the Vue file does not affect the use of web component properties

What is actually happening?

The scoped style tag in the Vue file affects the use of webcomponent properties

System Info

No response

Any additional comments?

No response

avatar
Jun 25th 2022

This is not really caused by the scoped CSS attribute specifically, but any custom attribute/property added to a WC that doesn't have any props defined.

avatar
Aug 31st 2022

Any updates on this? Found an open PR but no updates since 25 of June.