feat(custom-element): inject child components styles to custom element shadow root #11517
Conversation
Size ReportBundles
Usages
|
| for (let i = styles.length - 1; i >= 0; i--) { | ||
| const s = document.createElement('style') | ||
| s.textContent = styles[i] | ||
| this.shadowRoot!.prepend(s) |
There was a problem hiding this comment.
@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?
There was a problem hiding this comment.
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
There was a problem hiding this comment.
@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.
|
Exactly our problem too... |
close #4662
close #6610
close #7941
This references both #6610 and #7942 but implements it in a way that minimizes changes to
runtime-coreand also handles HMR for child-injected styles, without relying on changes to@vitejs/plugin-vue.With this change, a
*.ce.vuecomponent can import other*.ce.vuecomponents 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: