CSS issues when building Vuetify example as an UMD

[windhamg]

@EranGrin thank you so much for this amazing plugin -- it has offered us hope in using Vue 3 components in our legacy monolith stack. Also, Please forgive me for any knowledge gaps -- I've just started diving into the world of building web components over the past couple of weeks.

I tried building the code from https://github.com/EranGrin/vuetify-web-component-wrapper as a UMD:

  build: {
    lib: {
      entry: 'src/main.ts',
      name: 'VuetifyHelloWorld',
      fileName: (format) => `vuetify-hello-world.${format}.js`,
      formats: ['umd'],
    },
  },

However, when I try using the resulting UMD file in an HTML page, via the following:

<script src="./dist/vuetify-hello-world.umd.js"></script>

I lose the Vuetify styling:

The styling is intact with the original HTML from the source repo:

<script type="module" src="./src/main.ts"></script>

If I import the style.css file into the parent HTML page, the styling is correct -- but I would really like to be able to take advantage of restricting styling to the shadow DOM (as the Vuetify CSS conflicts with styling in our legacy monolith codebase). Is there any way you know of to build a custom element/web component, using vue-web-component-wrapper, that incorporates Vuetify without having to include the Vuetify CSS in the parent HTML page?

Many thanks in advance for any advice or pointers.