¿Puedo utilizar Bootstrap con Web Components?

La respuesta corta es "no", pero hay varios matices.

A ver... Web Components incluye varias especificaciones, entre ellas ShadowDOM. Tú puedes hacer componentes (custom elements) en los que no tienes shadow DOM y en ellos no habría problema alguno de utilizar Bootstrap, o cualquier otro framework CSS que cree estilos globales a la página. Incluso en componentes que tengan shadow dom tú puedes usar slots, los cuales son HTML que viene desde la página principal, en los que sí pueden llegar los estilos globales y por tanto usar los estilos de Bootstrap.

En problema, o mejor dicho, la característica de Shadow DOM es que encapsula el marcado que tiene dentro el componente, por lo que no le afectan los estilos CSS de la página (la mayoría de ellos, porque algunos como "font-family", "text-align" y "color" sí que le afectarían porque se heredan). Esto es bueno, porque tú puedes entender que un componente es completamente autónomo y no puede tener interferencias con otros componentes, si es que no se desean, pero es malo en tanto que el CSS de Bootstrap no va a llegar hasta dentro de los componentes.

Si quisieras que el CSS de Bootstrap llegase hasta el marcado del componente que tiene el shadow DOM podrías colocar dentro del marcado del componente la etiqueta <link> y cargar los estilos de Bootstrap, pero sería mala idea, porque Bootstrap es muy grande y tener en un componente miles de declaraciones CSS que realmente no vas a usar es un desperdicio de memoria. Además te generaría una dependencia con Bootstrap en ese componente, por lo que no lo podrías usar en otros proyectos.

En fin, que los estilos globales no se llevan bien con los Web Components, debido al shadow dom, pero tener estilos locales a los componentes es mucho mejor, porque te ayuda a tener organizado y localizado el CSS y siempre trabajar con pequeñas porciones de CSS, fáciles de manejar y de mantener.

A ver... en realidad sí y no.

No habría problema en usar Bootstrap con web components... pero siempre que no estés usando "Shadow DOM". Shadow DOM hace que los componentes se encapsulen y el marcado que tienen dentro no está afectado por interferencias de fuera del componente.

En la práctica hace que los estilos CSS no penetren dentro de los componentes, lo que es genial porque permite que tu componente no cambie de estilos afectado por CSS accidentalmente. En Shadow DOM siempre podrías usar las custom properties de CSS para que los estilos lleguen al marcado del componente, pero solamente mediante aquellas variables que ese componente incorpore.

Entonces, en la pregunta ¿Puedo usar Bootstrap con Web Components? la respuesta es sí, pero entonces no podrás usar Shadow DOM en esos componentes. Puedes hacer que los componentes rendericen el marcado sin shadow dom, a eso le conocemos como "LightDOM", en cuyo casi Bootstrap sí que afectará a tus componentes.

De todos modos, no hay problema con que tú uses Bootstrap para el estilo global de tu página, y que los componentes usen sus propios estilos. Simplemente Bootstrap, o cualquier otro framework CSS de estilos globales, como Tailwind o Materialize, no podrá estilizar tus componentes. Tampoco es tan problemático, simplemente los componentes tendrán que definir sus propios estilos y tú desde fuera los podrás seguir configurando con custom properties.

Por cierto, si deseas usar estilos globales en breve esperamos que el estándar de CSS Shadow Parts nos facilite la tarea... pero aún falta un poco para que se pueda usar.