Styles get injected in the document.head instead of the shadow root

[Vissie2]

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)

[karol-f]

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).

[Vissie2]

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.

[karol-f]

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

[Vissie2]

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)

[karol-f]

I'm sure you can load Vuetify component without the styles - check node_modules folder of Vuetify or check documentation.

[Vissie2]

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.

[Vissie2]

To this day the issue still gets some attention on stackoverflow. Here is a suboptimal workaround for anyone still running into this problem.

[orielsy]

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.