VUE3 app hosted in non-vue webpage causes CSS to leak in, leak out

I have a VUE app compiled into an html, css and js app, and its working great inside a SharePoint website, except for css styling. my vue apps css styles leak out into the parent sharepoint page, and the sharepoint styles leak into the vue app. I know I can use an iframe but that would create some other complexities for me. I was hoping specifying customElement:true in Vite would cause some shadow-dom help, but it does not.

Any recommendations how to host a vue app on a non-vue page and keep the two css’s totally separate?

Use scoped css, it will be applied to your vue components only.
https://vue-loader.vuejs.org/guide/scoped-css.html

1 Like

Anwering my own question for what its worth - Vue seems to have an immature implementation of shadow doms that can surround the entire app, especially when routers, hot reload in dev server, and dist asset files come into play. I used the vue-shadow-dom plugin and it worked, but was only a partial solution. I also needed :host {all:initial !important} and a css reset file inside the shadow dom too. i am manually moving css from the main page into my shadow dom at times, but in the dev server and the production build