Application styling not working inside Vue web component - spring-mvc

Question

I have a project that uses Spring MVC and Thymeleaf as template engine, but we are slowly deprecating the use of Thymeleaf here at the company, because of this a new module I'm developing is being implemented using Vue JS. As the project is already in production and being used, it's not worth it to remake everything from scratch and build a single Vue JS project. The solution we found to integrate the Thymeleaf front-end to the Vue module was to build the module as a web component and use Maven to move the compiled component to the Thymeleaf project, then use it. Problem is, we just saw that when you build the component, it uses a shadow root (when we disable the shadow mode, the component won't be shown), so the styling we have imported on our main page on Thymeleaf is not loaded on the Vue component unless we import it manually again on the Vue app manually. Is it possible to use the styles we defined previously without having to import the same styles again on the component's code?
Here's some of our configurations to maybe help out...
vue.config.js
// https://github.com/vuejs/vue-web-component-wrapper/issues/12#issuecomment-385141573
function enableShadowCss(config) {
const configs = [
config.module.rule('vue').use('vue-loader'),
config.module.rule('css').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('vue').use('vue-style-loader'),
config.module.rule('css').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('normal').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal').use('vue-style-loader'),
config.module.rule('less').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('vue').use('vue-style-loader'),
config.module.rule('less').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('normal').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal').use('vue-style-loader'),
];
configs.forEach(c => c.tap(options => {
options.shadowMode = true;
return options;
})
);
}
///...
chainWebpack: config => {
enableShadowCss(config);
}
package.json build scripts
"scripts": {
"serve": "vue-cli-service serve --port 8082 ",
"build": "vue-cli-service build --target wc --name relatorio-app ./src/App.vue",
"lint": "vue-cli-service lint"
},