unplugin / unplugin-vue-ce

🍒 A vue plugin that extends vue's Custom Element capabilities
MIT License
75 stars 3 forks source link

styles are missing when using defineAsyncComponent within vue file #61

Closed SavkaTaras closed 1 year ago

SavkaTaras commented 1 year ago

Hello @baiwusanyu-c ,

The plugin seems to have an issue when we use defineAsyncComponent the following:

const ComponentB = defineAsyncComponent(() =>
    import("../ComponentB/ComponentB.vue")
);

At this point it does not inject the style. Would it be possible to look into this as well?

Here's what creates an issue:

Repo: https://github.com/SavkaTaras/vue-cue-issues/

File (line 13): https://github.com/SavkaTaras/vue-cue-issues/blob/master/src/components/ComponentA/ComponentA.vue

Thank you, Taras

baiwusanyu-c commented 1 year ago

The problem is here https://github.com/vuejs/core/pull/7942/files#diff-56930a63772d2e89f19432918b9d6ed851ede4159b0d32404e0c1d8c159fec99R1382

This logical judgment is not complete. When using defineCustomElement to directly wrap an asynchronous component, it is like defineCustomElement(defineAsyncComponent(/Comp.vue/)) In this case, vue will automatically add the style of Comp.vue to the shadow, which will cause the logic of PR 7942 to add styles repeatedly. In order to prevent this situation, this is used judgment logic.

baiwusanyu-c commented 1 year ago

In the question code you gave, the asynchronous component exists in the descendant of the custom component wrapped by defineCustomElement (not the son component), which requires further processing and judgment