vue-web-component-wrapper icon indicating copy to clipboard operation
vue-web-component-wrapper copied to clipboard

Bootstrap classes inconsistently applied when using package with Shadow DOM mode

Open rvslan opened this issue 4 months ago • 1 comments

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.

rvslan avatar Oct 03 '24 15:10 rvslan