Understanding the consequences of open styling

Putting components from different teams together on the same screen, i.e., within the same DOM, can result in the same problems that we’d face if we just append any styling to a monolithic solution. Conflicts may arise and crucial styles may be altered or removed. Consequently, we’ll require a solution to prevent teams from just changing these styles.

Well, the first – and maybe most obvious – solution is to not have any special treatment, that is, we just leave styling completely open to all teams such that everyone can just add any styles to the shared document. If we follow this approach, each micro frontend can come with additional stylesheets that are then attached when the components from the micro frontend are rendered.

Open styling can lead to specificity conflicts and global style overrides, making it essential to implement scoped CSS solutions. This ensures that styles remain contained within...