When I utilize *ngContainerOutlet to dynamically insert components, it wraps the component's template within an ng-component tag which causes my CSS styles to become ineffective.
For example:
<div class="my-class">
<ng-container *ngComponentOutlet="MyComponent"></ng-container>
</div>
This results in the following structure:
<div class="my-class">
<ng-component>
<div>my content...</div>
</ng-component>
</div>
As a result, the my-class style is not correctly applied to the component's template.
I have attempted creating a CSS rule such as my-class > ng-component, but since the element is generated dynamically, this approach does not work. The same issue arises with the use of :first-child.
Is there a solution available, whether through CSS or Angular (such as preventing this encapsulation)?
Thank you, Alexandre