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)