> Faqs > ¿Puedo utilizar Bootstrap con Web Components?

¿Puedo utilizar Bootstrap con Web Components?

estoy comenzando a desarrollar con Web Components mis primeros custom elements y tengo una duda sobre si puedo usar los estilos que tengo cargados mediante el framework css Bootstrap.

En principio estoy viendo que Shadow DOM no le los pilla.

¿Es una buena idea que incluya Bootstrap en un componente donde lo necesito?

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

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.

Camila
162 4 11 4