Styles leaking between microfrontends when navigating in single-spa (Angular MF)
Author: EstevenJaviierCreated Jan 2, 2026Updated Jan 6, 2026
Problem
I'm working with single-spa and multiple Angular microfrontends.
When I navigate from one microfrontend to another, the CSS styles from the previous MF remain active and affect the next one, causing style conflicts.
Each microfrontend has its own styles, but they are injected globally into the <head> as <style> tags, so they are not automatically removed when the MF is unmounted.
Environment
- single-spa
- single-spa-angular
- Angular 15
- Webpack
- No SystemJS (using
registerApplication)
What I’ve tried
- Scoped styles using Angular component encapsulation (not enough for global styles)
- Evaluating
single-spa-css - Checking the official docs about scoped CSS: https://single-spa.js.org/docs/ecosystem-css/#scoped-css
Expected behavior
When navigating away from a microfrontend:
- Its styles should be removed or scoped
- Styles from one MF should not affect another MF
Questions
- What is the recommended approach to avoid CSS conflicts between microfrontends in single-spa?
Source: single-spa/single-spa