I have micro-frontend architecture. A main application that turns out into the Angular Element with Shadow DOM. A lot of small projects that turns out into the Angular Elements without Shadow DOM (ViewEncapsulation.Emulated).
Inside the main application I have component, that lazy loads some small application. Inside small application I have <ng-select></ng-select>. I add ng-select css to the main application bootstrap component css and ng-select loads broken. I also tried a lot of different ways to add this css. Works only one, when I encapsulate small application in shadow DOM and put all library css there, but it is a bad idea, because libraries css is huge.
It is not a css conflict (I tried it also on clear project) and problem is not in the ng-select (the same behavior with other private library elements). Just when I load "small" Angular Element to the main application Angular Element style tags appends to the head tag of the root html instead of shadow root of main application Angular Element.
Does anybody know how to fix it?