Empty styles on custom elements (.ce.vue)

[sytzez]

Describe the bug

Hi, I'm trying to create custom elements (web components) using Vue, following this 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 with unplugin-vue and esbuild, 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 setting shadowRoot: false on the element and importing the .css file generated by esbuild 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 our Code of Conduct
• Read the Contributing 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 a minimal reproducible of the bug.

[sytzez]

Hi, just an update. I've been investigating this a bit and I've been comparing the code of this repo to that of https://github.com/vitejs/vite-plugin-vue.

On this line &inline is added to the import statement that imports CSS from the SFC, with the intention of importing it as a raw string. While Vite supports this, ES Build doesn't. And I don't think there's a way to make ES Build import that as a raw string, at least not out of the box. See https://stackoverflow.com/questions/76206575/esbuild-import-css-as-a-string

[sxzz]

Did you try using esbuild-plugin-inline-import?

If it’s helpful, we could add a note in the documentation.

[sytzez]

I did try that, but I couldn't get it to work. It's a bit complicated because it needs the compiled CSS from the SFC, not the raw SFC file.