Isolating CSS

In the previous chapter, we identified the various kinds of third-party dependencies that we might encounter in micro frontends. In most cases, these dependencies only consist of scripts, but in some cases, they might also come with their own stylesheets. Especially in the case of component libraries, these styles might be wanted and should be shared among all used components. Nevertheless, the case that either a third-party dependency or a micro frontend ends up introducing some unwanted styling that impacts the whole layout is very likely.

One of the problems with micro frontend composition outside of the pattern introduced in Chapter 6 is that all micro frontends are running in one document, which implies the sharing of all introduced stylesheets.

In this chapter, we’ll look at methods to avoid running into style conflicts. We’ll see how we can craft robust solutions that are flexible yet isolated and therefore immune to leaking styles. An important...