Child component styles not applied when using defineCustomElement loaded as customElement

[riovir]

Version

16.8.1

Reproduction link

github.com

Steps to reproduce

git clone https://github.com/riovir/vue3-custom-element-child-sfc-styles.git
cd vue3-custom-element-child-sfc-styles
npm ci
npm start

Open http://localhost:8080

Notice how there is no colored background applied to either child component. (One loaded as customElement, one loaded with default behavior.)

What is expected?

At least one of the child SFC components having its style applied. Preferably the one loaded as a regular component. This way only the outermost component needs to be loaded as a customElement.

What is actually happening?

The styles of the regularly loaded child component get processed as usual: ending up in the head.
The styles of the child component loaded as customElement get ignored by the host component.

---

There is a workaround added manually mutating the styles prop of the host element. (See main.js) However, this poses multiple problems:

• TypeScript users will run into issues, as the styles prop is not included in the type definitions
• Child component styles manually need to be gathered up and pushed into the styles of the host element
  • this is error-prone
  • also degrades developer experience

[riovir]

Updated the workaround to use a utility function that recursively discovers styles of child components. This makes it simpler to use. That said the vue-loader doing this automatically would still be preferred.

[S0c5]

There is some update on top of this issue, we're facing the same error, styles are not applied to custom element child

[sillyash]

Any updates on this issue ?

I have a quite big VueJS / Vuetify project where this problem occurs when using a custom element and the style of the child components aren't applied.

I don't want to move my entire CSS from my components since it is mostly scoped.