feat(runtime-dom): Apply nested styling in custom elements (fix #4662)

[tcnijmeijer]

Summary

This is an alternative to #4309 fixing issue #4662. Compared to #4309 this should fix a few additional things:

• It can handle async (sub)components by adding the application of styling as a promise resolution callback.
• It works with <script setup> by having compiler-sfc generate the components option.
• It should work with HRM as well (untested).

Changes

compiler-sfc/compileScript.ts

• Generate the components option containing all the Vue components imported within the <script setup> block.

runtime-core/apiCustomElement.ts

• Rewrite _applyStyles to be recursive and handle async components.
• Rewrite ceReload to take the entire new component definition as argument so we can call _applyStyles.

[netlify]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	83b49c2
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/631701afcbe9550008f1cf37

[Kadeluxe]

This issue is a blocker for practically any custom elements development using Vue. What could be done to help fixing / merging this? Original issue is 1 year old at this point.

[stevenkuster]

It would be great if this PR got some attention. It would fix a lot of issues for us.

[SavkaTaras]

Hello @LinusBorg ,

Could you please evaluate this PR and see if this could be a valid fix for #4662 issue?

Thank you so much,
Taras

[s3fs]

Hello @LinusBorg @yyx990803,

Could you please evaluate this PR and see if this could be a valid fix for #4662 issue?

Thanks a lot!

[johnp]

Works with Vite build & HMR. Passes all tests I threw at it, including all the one's from the alternative PR here.

edit: Looking back, I'm having trouble replicating my Vite/HMR results. Might've used a direct vue.esm-browser.js import accidentally.

[yyx990803]

superseded by #11517