Bootstrap classes inconsistently applied when using package with Shadow DOM mode
Closed this issue · 6 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.
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.
Andretreccia/testing-web-component#1
In the CSS file I had to replace :root with :host
Ok waiting for news
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