Menu

Post image 1
Post image 2
1 / 2
0

Static CSS Leakage in Microfrontends — Why Shadow DOM Fails and How postcss-prefix-selector Fixes It

DEV Community·Chloe Zhou·5 months ago
#Dub9pVuE
Reading 0:00
15s threshold

This is a follow-up to MUI v4/v5 Style Conflicts in single-spa — A Complete Debug Record . The previous article covered dynamic style conflicts caused by MUI v4 JSS injecting style tags on mount and overriding the host app's Emotion styles. This article covers a different problem that surfaced right after: static CSS leakage. Both problems look the same on the surface — child app styles leaking into the host app — but the root causes are completely different, and so are the solutions. Discovering the Problem A UI style anomaly appeared in the host app. Opening DevTools and checking computed styles in the Elements panel, I found a class whose source was listed as App.css . Looking inside, it contained hardcoded MUI semantic class names like .MuiTypography-body1 — rules that were directly affecting the host app's DOM. There wasn't time to dig into it immediately, so a colleague took a look and suggested using Shadow DOM for isolation.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More