Esta pregunta es similar a alguna otra en StackOverflow, pero no pude encontrar ninguna respuesta que describa aplicable a mi situación y método no obsoleto (y estoy empezando a pensar que tal vez no haya una buena solución para esa situación).

Digamos que tenemos un archivo main.css que incluye estilos comunes para botones, listas, enlaces, etc. Entonces, es solo un archivo .css estándar que contiene estilos comunes que queremos reutilizar en la aplicación. Y queremos aplicar los mismos estilos a los componentes web con Shadow DOM.

Hay algunas maneras, que conozco, para lograr eso:

Utilizando uno de los enfoques obsoletos: :: shadow, >>>, / deep / selectors. Pero esos selectores ya no están disponibles, así que supongo que no es un buen enfoque para seguir adelante.Utilizando variables CSS. Este enfoque es bueno para fines de personalización, si necesitamos establecer algunas propiedades. Pero es demasiado complejo si queremos migrar 10-20 estilos comunes del archivo main.css.Utilizando la declaración @import o etiquetas de "enlace" dentro de Shadow DOM. Funcionará, pero duplicará todos los estilos para cada componente. Si tenemos 10 componentes web, terminaremos con 10 duplicados de exactamente los mismos estilos. No parece una solución lo suficientemente buena también. Especialmente si tenemos muchos estilos comunes, parece que puede ser una mala solución desde el punto de vista del rendimiento. No use Shadow DOM en absoluto y use estilos globales :) Pero no es la solución para el problema actual.

También verifiqué cómo se resolvió el mismo problema en Angular Framework (verifiqué la versión 5 de Angular). Cuando configuro el comportamiento de encapsulación en Native, en realidad solo está duplicando estilos (como en el n. ° 3 descrito anteriormente), lo que creo que no es la mejor manera (pero tal vez la mejor forma actualmente existente).

Entonces, ¿alguien sabe si hay alguna otra forma de resolver este problema sin los inconvenientes descritos anteriormente? Parece que los inconvenientes actuales de Shadow DOM traen aún más problemas de los que intenta resolver.