Bootstrap classes inconsistently applied when using package with Shadow DOM mode

[rvslan]

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.

[EranGrin]

Hi @rvslan, can you kindly create a stackblitz project that demonstrate the issue p.s. let us keep the communication via the issue and not via email

[rvslan]

@EranGrin this is project url https://stackblitz.com/~/github.com/rvslan/testing-web-component If i disable shadow dom its working

Let me know how can i make it works.

[EranGrin]

I created a patch PR, the solution is only a workaround. I need to find the best proper solution for the issue. https://github.com/Andretreccia/testing-web-component/pull/1 In the CSS file I had to replace :root with :host

[rvslan]

Ok waiting for news

[EranGrin]

Hi there, I added an option to replace the :root to :host

https://stackblitz.com/~/github.com/EranGrin/bootstrap-demo-webcomponent

This feature is added to the latest release

[EranGrin]

Hi @rvslan I would like to close this issue, please let me know if you have any thoughts