Using modern CSS features for isolation

In recent years, CSS has made huge leaps in improvement with respect to various areas including styling isolation. To achieve this, a couple of new constructs have been added to the CSS syntax:

• @layer gives us the possibility to define the precedence of CSS rules without relying on the initial ordering
• @scope makes it possible to define a new scope based on some selector
• @container is very handy for creating size-based rules based on an element
• ::slotted allows us to style elements used in a shadow DOM differently; it must be declared inside the shadow DOM
• ::part can be used to style any element inside the shadow DOM having a matching part attribute; it must be declared outside the shadow DOM

Naturally, any enhancement for the shadow DOM is an actual improvement for the support of micro frontends. However, even the constructs that are not directly related to shadow DOM may come in handy. Take, for instance, the...