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.
const template = document.createElement('template');
template.innerHtml = `
<style>@import "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" </style>
<div class="container">
<p>All my web component stylings go on from here and use bootstrap classes as well</p>
</div>
`
class MyWebComponent extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('my-web-component', MyWebComponent);And my index.html file is simply
<head>
<link rel="stylesheet" href="link to bootstrap3 or boostrap4.css" />
<script type="module" src="linkToMyWebComponent"></script>
</head>
<body>
<my-web-component />
</body>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!