feat(custom-element): inject child components styles to custom element shadow root

[yyx990803]

close #4662
close #6610
close #7941

This references both #6610 and #7942 but implements it in a way that minimizes changes to runtime-core and also handles HMR for child-injected styles, without relying on changes to @vitejs/plugin-vue.

With this change, a *.ce.vue component can import other *.ce.vue components and use them directly as Vue child components instead of custom elements. Child component's styles will be injected as native <style> tags into the root custom element's shadow root:

import { defineCustomElement } from 'vue'
import Root from './Root.ce.vue'

customElements.define('my-el', defineCustomElement(Root))

<!-- Root.ce.vue -->
<script setup>
import Child from './Child.ce.vue'
</script>

<!-- Child.ce.vue -->
<style>
div { color: red }; /* will be injected to Root.ce.vue's shadow root */
</style>

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	97.6 kB (+7.46 kB)	37.1 kB (+2.52 kB)	33.3 kB (+2.21 kB)
vue.global.prod.js	155 kB (+8.43 kB)	56.8 kB (+2.8 kB)	50.6 kB (+2.51 kB)

Usages

Name	Size	Gzip	Brotli
createApp	53.9 kB (+4.23 kB)	20.9 kB (+1.4 kB)	19 kB (+1.24 kB)
createSSRApp	57.8 kB (+4.61 kB)	22.5 kB (+1.54 kB)	20.5 kB (+1.36 kB)
defineCustomElement	57.4 kB (+5.54 kB)	22 kB (+1.82 kB)	20.1 kB (+1.65 kB)
overall	67.4 kB (+4.28 kB)	25.9 kB (+1.41 kB)	23.6 kB (+1.34 kB)

[boga001]

@yyx990803 Can we do the append? As my global styles are in the last tag and override child styles. In case of append we would have child styles come after the global. Maybe an option to specify this?