I have a host component that contains a header component using ViewEncapsulation.None and a mainContainer component using ViewEncapsulation.ShadowDom. The mainContainer component also includes an admin component with ViewEncapsulation.None. The admin component is a composite component that includes several other components, and I don’t want to use ViewEncapsulation.ShadowDom for it.

I’ve observed that the styles from the admin component are being applied to both the Shadow DOM and the root DOM, which affects the styling of the header component. How can I prevent the admin component's styles from leaking into the root DOM while keeping its current encapsulation settings?