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.

[EranGrin]

Hi @windhamg, I'll be glad to help you but, I don't quite understand why are you attempting to build as UMD, the vite default would be ES module, which make more sense for web application, UMD would normally be used to give support for commanJS (node.js run time) but I don't really see the use of the web component in node env context. There are several examples that you could take as a starting point. Please let me know if you need further assistance.