How can you prevent bootstrap version collisions using shadow dom #36777
Replies: 2 comments 1 reply
-
@bubblypatrick The newer version (5+) adds Perhaps food for thought on your issue, could have something to do with it...? Example: Version 3.4.x Modal Version 4.6.x Modal Version 5.2.x Modal Note: the |
Beta Was this translation helpful? Give feedback.
-
@bubblypatrick Hi there, did you ever find a solution for this? I'm wondering if namespacing different versions (find and replace) is the only viable solution? |
Beta Was this translation helpful? Give feedback.
-
Hello everyone hope you're all having a good day.
I'm making a web component that uses bootstrap 5. Since the shadow DOM is supposed to encapsulate styling I assumed that it would be a good way to prevent it from colliding with any sites that might be using older versions of bootstrap (since they tend to have the same class name). I feel like I'm missing something obvious, but whenever I include other versions of bootstrap in the html document they override what's in my component. I've been stuck on it for a few days now and haven't found anything to explain why this might be.
And my index.html file is simply
I've noticed that if I manually define styles within the template html like
<style>.form-control { p: 10 }</style>
that it works just fine and overwrites all the stylings. Any help, or learning material would be much appreciated. Although feel like I've read at least two dozen long articles about templates, shadow dom, etc. on it at this point. The flattened shadow dom looks like it should be encapsulated from the older scripts, but no luck.Thank you in advance!
Beta Was this translation helpful? Give feedback.
All reactions