Los estilos CSS se mezclan entre microfrontends al navegar en single-spa
Author: EstevenJaviierCreated Jan 2, 2026Updated Jan 2, 2026
Problema
Estoy trabajando con single-spa y varios microfrontends en Angular.
Al navegar de un MF a otro, los estilos CSS del microfrontend anterior permanecen activos y afectan al siguiente, generando conflictos visuales.
Los estilos se inyectan de forma global en el <head> como <style> , y no se eliminan cuando el MF se desmonta.
Entorno
- single-spa
- single-spa-angular
- Angular 15
- Angular 20
- Webpack
- Uso de
registerApplication(sin SystemJS)
Lo que he probado
- Encapsulación de estilos de Angular
- Revisión de
single-spa-css - Documentación oficial de scoped CSS
Comportamiento esperado
- Que los estilos de un MF no afecten a otros
- Que los estilos se eliminen o aíslen al desmontar el MF
Preguntas
- ¿Cuál es la forma recomendada de evitar conflictos de estilos entre MFs?
Source: single-spa/single-spa