fix(platform-browser): correctly add external stylesheets to ShadowDO…

…M components

Angular components that use ShadowDOM view encapsulation have an alternate
execution path for adding component styles to the DOM that does not use the
SharedStylesHost that all other view encapsulation modes leverage. To ensure
that ShadowDOM components receive all defined styles, additional logic has been
added to the ShadowDOM specific renderer to also cover external styles.

packages/platform-browser/src/dom/dom_renderer.ts

@@ -27,7 +27,7 @@ import {
 import {RuntimeErrorCode} from '../errors';
 
 import {EventManager} from './events/event_manager';
-import {SharedStylesHost} from './shared_styles_host';
+import {createLinkElement, SharedStylesHost} from './shared_styles_host';
 
 export const NAMESPACE_URIS: {[ns: string]: string} = {
   'svg': 'http://www.w3.org/2000/svg',
@@ -434,6 +434,18 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
       styleEl.textContent = style;
       this.shadowRoot.appendChild(styleEl);
     }
+
+    // Apply any external component styles to the shadow root for the component's element
+    const styleUrls = component.getExternalStyles?.(component.id);
+    if (styleUrls) {
+      for (const styleUrl of styleUrls) {
+        const linkEl = createLinkElement(styleUrl, doc);
+        if (nonce) {
+          linkEl.setAttribute('nonce', nonce);
+        }
+        this.shadowRoot.appendChild(linkEl);
+      }
+    }
   }
 
   private nodeOrShadowRoot(node: any): any {

packages/platform-browser/src/dom/shared_styles_host.ts

@@ -84,7 +84,7 @@ function addServerStyles(
  * @param doc A DOM Document to use to create the element.
  * @returns An HTMLLinkElement instance.
  */
-function createLinkElement(url: string, doc: Document): HTMLLinkElement {
+export function createLinkElement(url: string, doc: Document): HTMLLinkElement {
   const linkElement = doc.createElement('link');
   linkElement.setAttribute('rel', 'stylesheet');
   linkElement.setAttribute('href', url);