Solved by CSS: Donuts Scopes

Donut scoping refers to a method of preventing parent component styles from affecting the styles of its contained child components. This challenging CSS issue, introduced by Nicole Sullivan in 2011, has resurfaced with the introduction of the @scope at-rule, which allows for more precise scoping of styles. This rule can define the scope for styles and exclude specific regions, addressing the long-standing problem of CSS's global scope. While traditional methods involve specificity handling and using selectors like :not(), @scope offers a more flexible and comprehensive solution.