Closed Vissie2 closed 3 years ago
Hi, from a quick look Vuetify loads styles when You load component.
I thisnk You should load Vuetify compont and it's style manually (and manually add styles to Shadow DOM).
Thanks for your comment.
I'm not trying to load in Vuetify though. I know that this repo is showing how to load in Vuetify. But I'm trying to use other packages like v-calendar, vue-currency-input or vue-number-input. But for some reason it always injects the css from the packages in the document.head
instead of the shadow-root
.
Sorry I was unclear.
It will not automagically add CSS to Shadow Root.
I don't think it is possible to load in components while ignoring their styles, right? As I said, it will load in into the document.head
. So otherwise I'll be loading in the CSS twice. Which will be very bad practice.
Or are you saying I should recreate any of those packages, so I could determine the CSS myself?
It would be very helpful for people if you could provide an example to make packages like these work. (I think Vuetify is a bit of a different story compared to packages like this)
I'm sure you can load Vuetify component without the styles - check node_modules folder of Vuetify or check documentation.
I'm not trying to use Vuetify or any of the Vuetify components though.
This affects a lot of packages/plugins so I think this problem is quite serious.
To this day the issue still gets some attention on stackoverflow. Here is a suboptimal workaround for anyone still running into this problem.
It will not automagically add CSS to Shadow Root.
- You have to load component, without styling to Vue component/vue custom element component
- Only after that, if You confirm that it is unstyled (no Vuetify CSS is loaded) You can manually add CSS to your vue custom element component
I encountered this issue and I'm clueless as to how to best "manually add CSS to the Vue custom element component".
I want to know how to best load in the custom CSS. The issue being I'm trying to use "vue-custom-element" to turn a multi view medium sized app into a reusable "widget" we can use without polluting the page CSS.
First of all, great work!
I'm having problems when loading components from packages which include styling. As an example, I'm using v-calendar to demonstrate. This also happens with other packages.
The problem is that the styling is being injected in the head of the document, like this. As far as I known I'm doing everything the documentation says to enable all styles to go in the shadow root. I even based the project which is downloadable below on this repo.
The project to reproduce the issue: Download
Usage:
npm i && npm run serve
I don't think this should be normal behavior, right? Could this be a problem with
vue-loader
? If so, what can we do to prevent this from happening?Btw, I realized there have been more issues like this, but I don't think they were related to the same problem. (I could be wrong though)