If you wrap a component with the web-component-wrapper, its styles will be applied to the head of the document, rather than to web-component's shadow DOM. This can be changed by setting every occurrence of shadowMode to true in the webpack config (through vue.config.js). Currently this requires finding and setting about 16 different options.
If these options inherit from a default shadowMode setting, it would be much easier to change the options.
a shadowModeDefault variable (initially set to false), from which the shadowMode options can take their value.
web-component-wrapper yourself. If you believe this is a legit use it'd be better to show a repo of what exactly you are trying to do.Repo here: https://github.com/snirp/vue-web-component
I use web-component-wrapper inside main.js for development: ""vue-cli-service serve". The build script does indeed handle building the web component correctly: "vue-cli-service build --target wc --name my-web-component ./src/components/MyWebComponent.vue".
From your comment, I assume there must be a way to achieve the same with vue-cli-serve serve. I will take a second look, and post at the issue at vue-cli if needed. Thanks.
Most helpful comment
Repo here: https://github.com/snirp/vue-web-component
I use
web-component-wrapperinsidemain.jsfor development:""vue-cli-service serve". The build script does indeed handle building the web component correctly:"vue-cli-service build --target wc --name my-web-component ./src/components/MyWebComponent.vue".From your comment, I assume there must be a way to achieve the same with
vue-cli-serve serve. I will take a second look, and post at the issue at vue-cli if needed. Thanks.