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?

[Nicolas-Nmedia]

Any news on this? I'm trying to add my layers' order (@layer resets, plugins, application, components, overrides;) as a first style child but it's impossible when importing style in children components who themselves have @layer declaration as root element

[boga001]

@Nicolas-Nmedia in my case I had to use scoped on the style tag in SFC as the order of how these style tags are prepended was overwriting some styles (I use tailwind). Maybe we could help contributing but not sure where to start familiarizing myself with the project.

[patroza]

@yyx990803 is this supposed to work with SFCs?

In the following playground we will see the styles from a defineComponent, but not from within a <style> defined in a normal SFC.

https://play.vuejs.org/#eNqNU8GOmzAQ/ZWpLxskCqq6p5RdiURUbQ9t1fZW9xDBkLA1NrJNNlHEv+/YDrskykbLyZ55z35v/DiwvOuSbY9szjJT6qazYND23T2XTdspbeEAFdaNxGVvrGoLgS1KCwPUWrVwQ9SbTxOsxvqk99xaLPFYTtJFUqK71DEJUMPsXTk93SRrtDPO2v17i8bechZFcODyDBR0neDiS2JndHcUcTlwmaXBJNmjjcW2EyuLtAPIxlMgpX2WTposZtaUStbNOnkwStKwSA0AZ6Vqu0ag/tHZRknD2dzpBPo4WwmhHr/5mtU9xmO93GD5/0L9wexcjbOfGg3qLZKdsWdXmkYS2sXv77ij9XOzVVUvCH2l+QuNEr3TGGCLXlYke4Lzar/6t2rk+o8pdhalGU05oQ45eDxn9HjLK9Zf5H5Mbj2Ppk9TzN8YNTpaSXq5GDbEPY0avYOxUAi4O0fPXPxkhXoOswju7mFD2aiarYsFZxskh+GoQlCiYjB2L9DM4a9H0e2lEorIe4d8JM3s30CxmWQm8xRaeLwzdqSsNaIkcSFiR9BZvojjF+HLyIELmlt/8dI+O2n5B5dMaqcBfp7D8dd5fYh58MhZkvpxc3Y99i+yggzPpj8m1LL8qPKyoOEJ4rFr+g==

I mean taking the feature literal, yes it seems to work when the child component is a .ce too, but this is counter intuitive to me; any type of child component inside a ce should have it's style inside the ce shadow root, and otherwise in the document.head..
https://play.vuejs.org/#eNqNUkFu2zAQ/MqWl0iAKqFoTq4SQDZUtD20RZJbmIMhrW0lFCmQlGPD0N+zJK3EMWIjOlG7s+TM7OxY0XXpukc2YbmpdNNZMGj77prLpu2UtrCDGheNxFlvrGpLgS1KCwMstGrhgkYvfrxipzPc19NsmlbobnZtAiwg+lIdXmHSJdqIs3b71aKxl5zFMey4PAKFx9/hko8YRfR2HHM5cJlnQQlpoB+LbSfmFukPIB9vgYz+8+ygyRJmTaXkolmmj0ZJcoTYAHBWqbZrBOp/nW2UNJxNHE+gj7O5EOr5j69Z3WMy1qsVVk8f1B/NxtU4+6/RoF4jyRl7dq7JktAub//ihs6vzVbVvSD0meYNGiV6xzHApr2sifYBzrP97XfVyOWdKTcWpRlFOaIOOXg8Z7S82Rnpb3S/p5d+jtwnF8fFn45UEULCWZoVezBn5/dWN2t/APiFJCJcQCsPtbzw+6RDFoDHmx2f+UTMSbGSFKgEViTpfcwpHsZCKeDqGB3tQKOsUU8giuHqGlYUWeLi0srZ6o1zKSjoCRi7FWgmcO9R9HqlhKLhrUM+k5XsYaA0H1iS+xE6eLwTux9ZakRJ5ELy96CT9nm7SEHwa7Tzp6NWfHPGnzJxeAFRo2Ra

How can one make a component library that will render styles properly outside custom elements, and inside custom elements?

[maddanio]

Exactly our problem too...

[RozbehSharahi]

This is not a real solution to the issue imho. I might be worng.

As far as I can see, this way it is not possible to use the same child-component within a shadow-root and within normal app scenario.

Imagine a button you want to use on the one-hand on some shadow-root component and one the other hand within an app that was mounted on some none-shadow-root div on your page.

[patroza]

This is not a real solution to the issue imho. I might be worng.

As far as I can see, this way it is not possible to use the same child-component within a shadow-root and within normal app scenario.

Imagine a button you want to use on the one-hand on some shadow-root component and one the other hand within an app that was mounted on some none-shadow-root div on your page.

yes. We're planning a component library which will have a copy and separate exports for CE and non CE. But this is far from ideal.