Styles in normal component aren't applied in web component

Open ColonelThirtyTwo opened this issue 6 months ago • 1 comments

Vue version

3.5.13

Link to minimal reproduction

https://github.com/ColonelThirtyTwo/vue-wc-styles-test

Steps to reproduce

Run pnpm run dev on the linked repo.

What is expected?

The paragraph should have a red background, as specified in the Bar.vue's <style>s.

What is actually happening?

The paragraph has no background.

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 10.41 GB / 27.29 GB
    Container: Yes
    Shell: 4.0.2 - /usr/bin/fish
  Binaries:
    Node: 24.1.0 - /sbin/node
    Yarn: 1.22.22 - /sbin/yarn
    npm: 11.4.1 - /sbin/npm
    pnpm: 10.12.1 - /sbin/pnpm
  Browsers:
    Chromium: 137.0.7151.68
  npmPackages:
    vue: ^3.5.13 => 3.5.17

Any additional comments?

Related to #11517 - that only seems to grab styles from nested .ce.vue components and not regular .vue components, which is limiting.

Can be worked around by including the styles in the web component instead, but that defeats the point.

Jun 18 '25 14:06 ColonelThirtyTwo

A side note: Only the definition of a ce component contains styles; normal components do not. Therefore, it is not possible to inject the styles of normal components into the ce root.

Jun 19 '25 01:06 edison1105