vue-web-component-wrapper
vue-web-component-wrapper copied to clipboard
Bootstrap classes inconsistently applied when using package with Shadow DOM mode
Hello, I’m using your package to convert my Vue app into a web component with Shadow DOM mode enabled. I'm facing issues when trying to include and use Bootstrap within the component.
Some Bootstrap classes (e.g., btn, container, text-center) are working as expected, while others aren’t applied correctly. Specifically, when I inspect the elements in the browser, I see that some Bootstrap variables (like CSS properties or styles) are either not defined or not applied to the elements inside the Shadow DOM.
I am importing Bootstrap's SCSS in my component and using Vite as my build tool. When I inspect the DOM, I see that:
Some classes are styled properly. Other classes appear to be missing their Bootstrap styles, or styles related to variables like --bs-border-radius-lg aren’t being applied.