Angular ShadowDom pull in style tags from other mixed encapsulation modes

I have a specific component I want to use Shadow Dom with to completely isolate it from external styles (most of the other components use the default emulated view encapsulation).
However, I noticed that rather than isolating this component from other styles, Angular placed <style> tags from all the other components INTO the Shadow Dom component. This completely removes the point of using shadow dom.
After banging my head for a while, I found that in the documentation, this is apparently expected behavior (Angular 17 doc) for Angular. I'm at a loss as to why this is desired, as it also results in an incredible amount of DOM bloat for each instance of this component being used, but regardless, I need to create a component that is insulated from external styles.
I have a repro set up here

Is there a way to properly completely insulate an Angular component from other component styles with Shadow Dom? I'm about to just do this whole thing manually.

I've tried looking at the ViewEncapsulation modes, but apparently it is "expected" behavior.
According to the docs reasoning for copying styles:

This approach may seem counter-intuitive at first, but without it a component with ViewEncapsulation.None could not be used within a component with ViewEncapsulation.ShadowDom, since its styles would not be available.
​

This is a huge (and misguided) assumption on how developers will always be using Shadow Dom. Shadow Dom is design to provide insulation, and that insulation should be provided when asked. If there are special cases of needing to pull in styles, the developer should either handle that manually (since they're using a feature that is designed for isolation), or not use Shadow Dom at all (a more realistic scenario probably).

Continue reading...