Vue 3 loading CSS in the shadow dom of nested components

Question

I'm developing an embeddable widget as a custom element. For this I am using Vue. I created a Widget.ce.vue file and enabled style loading in the component shadow root.

But in this way, only the style is loaded from the component itself, but not from the components used in it.

Tell me, please, is there a solution that will allow me to load styles from all nested components in the shadow root? Or do I need to register all components separately as a custom element?

Here is my project on codesandbox https://codesandbox.io/s/bold-moore-yu30i8

Answer 1

Try to register pay component as custom element:

import pay from "./components/PaymentBtn.ce.vue";
window.customElements.define("payment-btn", defineCustomElement(pay));

and in Widget.ce.vue component don't import it just render it like custom element.

<payment-btn label="Pay"></payment-btn>

Didn't try with Vue-CLI but it works with Vite .