Describe the bug

Hi, I'm trying to create custom elements (web components) using Vue, followingthis example from the Vue website.

The linked section explains how to apply the styles from an SFC inside the shadow root of the custom element. It states that by changing the file extension to.ce.vue, the file should export an object with a.styles property which contains the styles for the SFC.

See my attempt here:https://github.com/sytzez/vue-ce-test/blob/master/src/index.js

When I try this approach withunplugin-vue andesbuild, the.styles property always contains[ {} ] (An array containing an empty object). And because of this, Vue does not inject the right styles inside the shadow DOM of the element.

I can get the right styles by settingshadowRoot: false on the element and importing the.css file generated byesbuild in my HTML file. However, this solution does not work for our purposes as we absolutely require shadow root for our components. Without shadow root we cannot use<slot> in our custom components.

Reproduction

https://github.com/sytzez/vue-ce-test

System Info

System:    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz    Memory: 1.96 GB / 15.49 GB    Container: Yes    Shell: 5.8.1 - /bin/zsh  Binaries:    Node: 18.19.0 -~/.nvm/versions/node/v18.19.0/bin/node    Yarn: 1.22.21 -~/.nvm/versions/node/v18.19.0/bin/yarn    npm: 10.2.3 -~/.nvm/versions/node/v18.19.0/bin/npm  Browsers:    Chrome: 129.0.6668.70

Used Package Manager

npm

Validations

• Follow ourCode of Conduct
• Read theContributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is aminimal reproducible of the bug.