fix(platform-browser): unencapsulated styles leaking out of shadow dom host

[crisbeto]

Currently when a component with ViewEncapsulation.None is inserted, it always adds its styles to document.head. This can be problematic when the component is inside the shadow DOM, because it can cause styles to leak out of it.

These changes resolve the issue by adding some extra logic to the SharedStylesHost that allows for multiple "insertion nodes" to be associated with a component host node. Then we use this new functionality to associate the unencapsulated component styles with the closest shadow root.

Note that in most cases we'll have one insertion node per host node, but we have to support multiple for the case where several unencapsulated components are inserted inside a shadow DOM host.

Fixes #35039.

[jessicajaniuk]

@crisbeto Did you still want to land this PR?

[crisbeto]

Yes, I think that all the comments were addressed but the discussion has stalled.

[Yqnn]

Any news ? Having this PR merged would be great to get rid of workarounds based on ɵDomSharedStylesHost private API.

[jesusreal]

Also waiting for this to be merged. It would be great to have this soon in Angular. Are there any news on it?

[mangei]

Hi, any news on this? We ran into the same issue, when providing our Angular webcomponents which led to break the style of the host-application. (both applications used Angular Material, but in different versions). Thank you!