Can I use Bootstrap with Web Components?

The short answer is “no”, but there are several nuances.

Let’s see… Web Components includes several specifications, including ShadowDOM. You can make components (custom elements) in which you do not have shadow DOM and in them there would be no problem using Bootstrap, or any other CSS framework that creates global styles for the page. Even in components that have shadow dom you can use slots, which are HTML that comes from the main page, in which global styles can arrive and therefore use Bootstrap styles.

The problem, or rather, the characteristic of Shadow DOM is that it encapsulates the markup inside the component, so it is not affected by the CSS styles of the page (most of them, because some like “font-family”, “text-align” and “color” would affect it because they are inherited). This is good, because you can understand that a component is completely self-contained and cannot interfere with other components, if they are not wanted, but it is bad in that Bootstrap’s CSS is not going to reach inside the components.

If you wanted the Bootstrap CSS to reach the markup of the component that has the shadow DOM, you could place the tag inside the markup of the component and load the Bootstrap styles, but it would be a bad idea, because Bootstrap is very big and take into account a component thousands of CSS declarations that you’re not really going to use is a waste of memory. It would also generate a Bootstrap dependency on that component, so you couldn’t use it in other projects.

Anyway, global styles don’t get along well with Web Components, due to the shadow dom, but having local styles to components is much better, because it helps you to have organized and localized CSS and always work with small portions of CSS , easy to handle and maintain.