Inconsistent load order of component styles in Angular ShadowDom

Question

I stumbled upon a setup where styles of Angular components are attached to a ShadowDom in a different order depending on whether it's the first time the component is rendered in a view. This happens more naturally with Angular Material components, but can be reproduced using only simple self written Angular components: Check out a demo at Stackblitz!

To reproduce one needs three nested components:

• ContentComponent: Contains some content with custom styling and uses ViewEncapsulation.None
• ShadowComponent: Contains a single ContentComponent, some custom styling and uses ViewEncapsulation.ShadowDom
• ContainerComponent: Contains a single ShadowComponent and uses ViewEncapsulation.None

Now for the first ContainerComponent in a view the styles from ShadowComponent are attached to the ShadowDom before the styles from ContentComponent (as I would expect). For all others it's the other way around.

Why is the behavior different? Is this a bug? And is there a way to prevent it without changing the components ViewEncapsulation?