Problems arising from defineCustomElement and Unocss

[MQYForverT]

Vue version

3.4.30

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-yb3t5n?file=package.json,src%2Fcomponents%2FCompB.vue,src%2Fcomponents%2Findex.ts

Steps to reproduce

I use Vue3 to write web component, now i have two component. A & B

I imported B in A (B is not custom elements), and then used A as a custom element for external use.
I used a placeholder in A, which is available, but unocss in B is invalid. I tried to add a placeholder in B as well, but it was also invalid

What is expected?

CompB style rendering normal

What is actually happening?

look the issue：unocss/unocss#3920

Unocss said that Vue should improve the definition of Custom Element, so should Vue or Unocss be the perfect solution to this problem?

System Info

No response

Any additional comments?

No response

[hickiy]

I think this is a normally problem, comB isn't to been resolve by unocss plugin, so its class haven't to been transifer and insert, so that is a compatbility problem between unocss and vite

[Simon-He95]

I think this is a normally problem, comB isn't to been resolve by unocss plugin, so its class haven't to been transifer and insert, so that is a compatbility problem between unocss and vite

I don't understand what you mean. The current scenario is that when there is an imported component in defineCustomElement, the style of the imported component is not loaded. This should have nothing to do with unocss.

[Simon-He95]

I provided a demo without introducing unocss

[hickiy]

I think this is a normally problem, comB isn't to been resolve by unocss plugin, so its class haven't to been transifer and insert, so that is a compatbility problem between unocss and vite

I don't understand what you mean. The current scenario is that when there is an imported component in defineCustomElement, the style of the imported component is not loaded. This should have nothing to do with unocss.

the unocss plugin will extract the class in the component template, In shadow-dom mode comA is registed by definedCustomElement api, so its class in template will be extract , but it sub com B will not

vite resolve comA(shadow-dom first) and its sub component rerecursively, but unocss plugin not

[Simon-He95]

the unocss plugin will extract the class in the component template, In shadow-dom mode comA is registed by definedCustomElement api, so its class in template will be extract , but it sub com B will not

compB is extracted too ， you can add break point to test

[hickiy]

In the style of shadow-dom, bg-red isn't here

[Simon-He95]

check my repo link without unocss，no style because vue api no support this case

[hickiy]

check my repo link without unocss，no style because vue api no support this case

ok. I will do it tomorrow, good night!

[MQYForverT]

check my repo link without unocss，no style because vue api no support this case

ok. I will do it tomorrow, good night!

Hello, have you confirmed this question? Will there be a schedule

[baiwusanyu-c]

When Vue's custom elements were first designed, it was expected that every subcomponent under the custom element would be a custom element. This caused the problem that the styles of ordinary components under the custom element would not take effect. The relevant solution is still under further discussion. The current temporary solution is to follow the rules of Vue, that is, every subcomponent is a custom element.

[MQYForverT]

Vue 的自定义元素在设计时，就期望自定义元素每个子组件都是一个自定义元素，现在我们来看一下自定义元素组件的生效问题，目前解决方案还在进一步中，目前临时的解决方案是遵循 Vue 的规则，即每个子组件都是一个自定义元素。

Okay, until there is a further solution, I will use the one provided by unocss: import the styles of each subcomponent into the root component.

But as a user, let me share my thoughts.

Because many businesses are not just single components, we have chosen to use Vue3 to develop components. Apart from defining the root element as a custom element and providing it externally, all internal operations should be consistent with the logic of ordinary elements, which will make development very comfortable.

If all subcomponents must be custom elements, then each layer needs to handle event listening and prop types, which would be very uncomfortable. Moreover, it is not possible to only introduce style files in the root component like regular components. I need to separate my overall style files one by one and import them in their respective custom elements, or simply not split them, and import each custom element, which feels very elegant.

So in summary, I believe that even if considering other scenarios, it is important not to go against the original intention. The reason why I chose Vue to develop custom elements was because of its convenience, but now it makes me feel very uncomfortable

[edison1105]

duplicate of #4662
It has been fixed via #11517
see https://stackblitz.com/edit/vitejs-vite-pkmdzu?file=package.json