When importing component inside custom element, style is discarded

[gnuletik]

Version

3.2.14

Reproduction link

github.com

Steps to reproduce

git clone git@github.com:gnuletik/vue-ce-import-comp-style.git
cd vue-ce-import-comp-style
yarn run dev

Open browser

What is expected?

CSS of OtherComponent.vue should be applied.
The text "It should be blue" should be blue.

What is actually happening?

Style is not applied.

---

I tried renaming OtherComponent to OtherComponent.ce.vue, but the result is the same.

This is useful when writing a set of custom elements to have shared components between custom elements.

[tony19]

Also encountered this issue. Here's a couple more repros:

• w/Vue CLI
• w/Vite

[raffobaffo]

I also encountered it and just worked on a fix, will create a PR soon (my first one here 😨 )

[gnuletik]

I just realized there is already an open PR about this : #4309

[raffobaffo]

I see 👁️ . My changes are very similar, just its more recursive, meaning also components at any level are interested.

[raffobaffo]

Ok, this should be safer now. This addition will add any child component style to the main parent, no matter how deeply nested it is

[pawel-marciniak]

Anyone know if it will be merged? It blocks me from using Vue 3 :/ @raffobaffo What about third party nested components (e.g. imported from some package)? Will your solution also work for them?

[LinusBorg]

We will solve this, it might take a few more days or weeks though.

[pawel-marciniak]

We will solve this, it might take a few more days or weeks though.

@LinusBorg Ok, thanks for quick reply, it's good to know that it will be solved at some point in the future :)

[raffobaffo]

@pawel-marciniak Yes, it is.
@LinusBorg Great to hear. Atm to overcome this problem, we are using an own extended version of the defineCustomElement that provides that hack I inserted in the pr.

[lucasantunes-ciandt]

@raffobaffo would you mind sharing how did you extend it? I tried it here by basically cloning /runtime-dom/src/apiCustomElement.ts with your changes but got a lot of syntax error from TS.