'Inject CSS styles inside of the shadow-root instead of the head tag | Vue.js & Webpack
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.
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?
Solution 1:[1]
If the library is itself embedding the styles to the head of the page, then there is nothing you can do other than to write some script to manually copy it into the shadow dom after initialization. I ran into the same issue for Font Awesome icons. Luckily, they provided a fix for this. (https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Jijo James |