EranGrin
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.
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
@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.
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
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
Hi @rvslan I would like to close this issue, please let me know if you have any thoughts