Using the shadow DOM

In a custom element, we can open a shadow root to attach elements to a dedicated mini document, which is actually shielded from its parent document. Overall, this sounds like a great idea, but like all the other solutions presented beforehand in this chapter, there is no hard requirement.

Figure 13.5 – Shadow DOM creates a mini document that is collision-free by default

In Figure 13.5, we see that the mini document of a shadow DOM isolates the contained DOM nodes from any outside styling. Therefore, by bringing in only the relevant styles from the shown micro frontend, we’d get automatic isolation. No collisions can happen inside the shadow DOM.

Ideally, a micro frontend is free to decide how to implement the components. Therefore, the actual shadow DOM integration has to be done by the micro frontend.

There are some downsides to using the shadow DOM. Most importantly, while the styles inside the shadow DOM stay...