Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
varcyan opened this issue Jun 22, 2022 · 2 comments · Fixed by #6182
Labels
🐞 bug Something isn't working scope: custom elements

Comments

@varcyan
Copy link

varcyan commented Jun 22, 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

LinusBorg added a commit that referenced this issue Jun 25, 2022
fix Scoped attribute in Vue file affects the use of web component #6163
@LinusBorg LinusBorg added 🐞 bug Something isn't working scope: custom elements labels Jun 25, 2022
@LinusBorg LinusBorg self-assigned this Jun 25, 2022
@LinusBorg
Copy link
Member

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.

@LinusBorg LinusBorg changed the title Scoped attribute in Vue file affects the use of web component Web Component without props definitions breaks when passed custom attribute like data-v-xxxxxxx Jun 25, 2022
@LinusBorg LinusBorg removed their assignment Jun 28, 2022
@sacki5
Copy link

sacki5 commented Aug 31, 2022

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

LinusBorg added a commit that referenced this issue Oct 20, 2022
fix Scoped attribute in Vue file affects the use of web component #6163,#6895
LinusBorg added a commit that referenced this issue Nov 1, 2022
…#6182)

fix Scoped attribute in Vue file affects the use of web component #6163,#6895
chrislone pushed a commit to chrislone/core that referenced this issue Feb 4, 2023
zhangzhonghe pushed a commit to zhangzhonghe/core that referenced this issue Apr 12, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Sep 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working scope: custom elements
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants