You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm attaching my react instance into a web component and it's styles are being added to that component's shadow DOM. I've been using the ?inline flag for any styles I use with my React but the issue is any external module (let's say a component library like React's Material UI) will inject it's styles into the host app's head and mess up any classes that bear the same name as that component library. Any tailwind based libraries are a great example as they have classes like container that can co-exist in other apps very easy and will break them.
Some libraries do offer individual styles or scoped CSS, but some don't and since I'm using this in a fairly large React I need a way to disallow injecting styles to my host app. So in short, I need vite to push those stlyes to my web component's shadow DOM somehow.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
@mariojankovic is your build compiling to umd or iife, by chance? I noticed this issue as well in patricknelson/svelte-retag#6 but it only happens when compiling to anything that's not es or cjs. Asking since I think maybe it's caused by the code here (pinned to 5.x for posterity):
I wonder if maybe we could somehow configure host element that this .appendChild() could be called on, instead of always being on document.head.appendChild? 🤔
I wonder if maybe we could somehow configure host element that this .appendChild() could be called on, instead of always being on document.head.appendChild? 🤔
@patricknelson that's exactly what we need. A way to define what host we want to use for HMR injected styles. I ended up targeting this thing differently but I think it's still valid as I'd like to go back to shadow DOM.
Describe the bug
I'm attaching my react instance into a web component and it's styles are being added to that component's shadow DOM. I've been using the
?inline
flag for any styles I use with my React but the issue is any external module (let's say a component library like React's Material UI) will inject it's styles into the host app's head and mess up any classes that bear the same name as that component library. Any tailwind based libraries are a great example as they have classes likecontainer
that can co-exist in other apps very easy and will break them.Some libraries do offer individual styles or scoped CSS, but some don't and since I'm using this in a fairly large React I need a way to disallow injecting styles to my host app. So in short, I need vite to push those stlyes to my web component's shadow DOM somehow.
Reproduction
https://stackblitz.com/edit/vitejs-vite-htcrgj?file=src%2FApp.jsx,src%2Fmain.jsx&terminal=dev
Steps to reproduce
npm install
npm run dev
System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: