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

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


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)