He estado refactorizando un sitio web de Polymer a Lit y he avanzado bastante, pero estoy perplejo por el estilo. Para simplificar el desarrollo mientras me concentro en la funcionalidad, he estado haciendo esto:
export class StyledElement extends LitElement { // This applies styles by removing the shadowroots allowing the script tags on // index.html to work createRenderRoot() { return this; } }Entonces cada elemento hereda esto y puede usar:
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" /> ... <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" crossOrigin="anonymous"></script> <script src="/node_modules/masonry-layout/dist/masonry.pkgd.min.js" crossOrigin="anonymous"></script>Lo cual hace un trabajo razonable al hacer que Masonry y Bootstrap estilicen las páginas correctamente con algunos problemas de empaque/ancho. Antes de comprometerme a solucionar estos problemas, he notado que esta no parece ser la 'manera correcta de hacer las cosas, ¿hay una forma correcta de usar Masonry y Bootstrap o una alternativa que debería usar?
De acuerdo, puede que esta no sea una respuesta completamente desarrollada, pero en general aquí algunos pensamientos:
No existe tal cosa como el camino correcto. hay formas y hay costos: -> Si importa los archivos minimizados, está importando casi todo y sin renderizar la raíz, debería propagarse a los componentes.
Desde una perspectiva arquitectónica, la idea general de los componentes (y en particular los componentes web) es la reutilización -> por lo tanto, los estilos generalmente se encapsulan dentro del componente.
Si vamos a juzgar este aspecto, es difícil implementar bootstrap con componentes iluminados en este momento porque la última "manera correcta" sería que cada componente tenga su propio estilo encapsulado en sí mismo. De hecho, si recuerdo bien, el ecosistema de reacción tardó un tiempo en producir una versión de ReactBootstrap (que podría mirar aproximadamente en el código e inspirarse para una portabilidad).
En una búsqueda rápida, puedo ver que alguien hizo un intento: https://github.com/nik-christou/lit-element-bootstrap
haber revisado el código de un componente Alert -> esa es una buena implementación.
En última instancia, también podría aislar las partes que necesita de bootstrap y transferirlas a su proyecto (también conocido como importar solo las partes que usa) -> eso sería un compromiso aproximado.
Lit es una biblioteca de componentes. Pero el entorno también importa.