javascript - Inject CSS styles inside of the shadow-root instead of the head tag | Vue.js & Webpack

Question

I'm making an embeddable widget for websites using Vue.js and vue-custom-element. Everything was going smoothly until I ran into a problem.

When I'm trying to use a component (with css) from a package. Like vue-number-input for example. The css gets injected in the head of the webpage even though it should be added inside the shadow root.

After a lot of research I haven't found a solution yet.

As you can see here you see that the css from the number input package is injected inside the head while the other stylings are in the shadow root like they should.

As far as I know I changed all of the settings needed to make the application work inside a shadow root.

This is my vue.config.js, my main.js (where I register the custom element) and my component (where I import the component from the package).

Does anyone know how I can do this or is this even possible?

Thanks!

question from:https://stackoverflow.com/questions/65903965/inject-css-styles-inside-of-the-shadow-root-instead-of-the-head-tag-vue-js-w

Answer 1

Waitting for answers