refactor(platform): consolidate and expose shadow dom detection utilities

Over time we had accumulated the same utility for finding the shadow root of an element in multiple places. These changes move it into a common place under `cdk/platform`.

I also decided to remove the underscore from `_supportsShadowDom` so it's officially a public API. It was already exposed under `cdk/platform` so there was nothing stopping people from using it, but the underscore looked weird. The API should be stable enough, since we've had it for more than a year in multiple components and we haven't had issues with it.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -24,7 +24,7 @@ import {
 import {TestBed, ComponentFixture, fakeAsync, flush, tick} from '@angular/core/testing';
 import {DOCUMENT} from '@angular/common';
 import {ViewportRuler, ScrollingModule} from '@angular/cdk/scrolling';
-import {_supportsShadowDom} from '@angular/cdk/platform';
+import {supportsShadowDom} from '@angular/cdk/platform';
 import {of as observableOf} from 'rxjs';
 
 import {DragDropModule} from '../drag-drop-module';
@@ -4578,7 +4578,7 @@ describe('CdkDrag', () => {
 
     it('should be able to drop into a new container inside the Shadow DOM', fakeAsync(() => {
       // This test is only relevant for Shadow DOM-supporting browsers.
-      if (!_supportsShadowDom()) {
+      if (!supportsShadowDom()) {
         return;
       }
 
@@ -4612,7 +4612,7 @@ describe('CdkDrag', () => {
     it('should be able to drop into a new container inside the Shadow DOM and ngIf',
       fakeAsync(() => {
         // This test is only relevant for Shadow DOM-supporting browsers.
-        if (!_supportsShadowDom()) {
+        if (!supportsShadowDom()) {
           return;
         }
 

src/cdk/drag-drop/drop-list-ref.ts

@@ -10,7 +10,7 @@ import {ElementRef, NgZone} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {coerceElement} from '@angular/cdk/coercion';
 import {ViewportRuler} from '@angular/cdk/scrolling';
-import {_supportsShadowDom} from '@angular/cdk/platform';
+import {supportsShadowDom, getShadowRoot} from '@angular/cdk/platform';
 import {Subject, Subscription, interval, animationFrameScheduler} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {moveItemInArray} from './drag-utils';
@@ -907,7 +907,8 @@ export class DropListRef<T = any> {
    */
   private _getShadowRoot(): DocumentOrShadowRoot {
     if (!this._cachedShadowRoot) {
-      this._cachedShadowRoot = getShadowRoot(coerceElement(this.element)) || this._document;
+      const shadowRoot = getShadowRoot(coerceElement(this.element)) as ShadowRoot | null;
+      this._cachedShadowRoot = shadowRoot || this._document;
     }
 
     return this._cachedShadowRoot;
@@ -1102,16 +1103,3 @@ function getElementScrollDirections(element: HTMLElement, clientRect: ClientRect
 
   return [verticalScrollDirection, horizontalScrollDirection];
 }
-
-/** Gets the shadow root of an element, if any. */
-function getShadowRoot(element: HTMLElement): DocumentOrShadowRoot | null {
-  if (_supportsShadowDom()) {
-    const rootNode = element.getRootNode ? element.getRootNode() : null;
-
-    if (rootNode instanceof ShadowRoot) {
-      return rootNode;
-    }
-  }
-
-  return null;
-}

src/cdk/platform/features/shadow-dom.ts

@@ -9,11 +9,24 @@
 let shadowDomIsSupported: boolean;
 
 /** Checks whether the user's browser support Shadow DOM. */
-export function _supportsShadowDom(): boolean {
+export function supportsShadowDom(): boolean {
   if (shadowDomIsSupported == null) {
     const head = typeof document !== 'undefined' ? document.head : null;
     shadowDomIsSupported = !!(head && ((head as any).createShadowRoot || head.attachShadow));
   }
 
   return shadowDomIsSupported;
 }
+
+/** Gets the shadow root of an element, if supported and the element is inside the Shadow DOM. */
+export function getShadowRoot(element: HTMLElement): Node | null {
+  if (supportsShadowDom()) {
+    const rootNode = element.getRootNode ? element.getRootNode() : null;
+
+    if (rootNode instanceof ShadowRoot) {
+      return rootNode;
+    }
+  }
+
+  return null;
+}

src/dev-app/focus-trap/focus-trap-demo.ts

@@ -17,7 +17,7 @@ import {
   QueryList,
 } from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
-import {_supportsShadowDom} from '@angular/cdk/platform';
+import {supportsShadowDom} from '@angular/cdk/platform';
 
 @Component({
   selector: 'shadow-dom-demo',
@@ -39,7 +39,7 @@ export class FocusTrapDemo implements AfterViewInit {
   @ViewChildren(CdkTrapFocus)
   private _focusTraps: QueryList<CdkTrapFocus>;
 
-  _supportsShadowDom = _supportsShadowDom();
+  _supportsShadowDom = supportsShadowDom();
 
   constructor(public dialog: MatDialog) {}
 

src/material/autocomplete/autocomplete-trigger.ts

@@ -17,7 +17,7 @@ import {
   ScrollStrategy,
   ConnectedPosition,
 } from '@angular/cdk/overlay';
-import {_supportsShadowDom} from '@angular/cdk/platform';
+import {getShadowRoot} from '@angular/cdk/platform';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {DOCUMENT} from '@angular/common';
@@ -230,14 +230,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
         window.addEventListener('blur', this._windowBlurHandler);
       });
 
-      if (_supportsShadowDom()) {
-        const element = this._element.nativeElement;
-        const rootNode = element.getRootNode ? element.getRootNode() : null;
-
-        // We need to take the `ShadowRoot` off of `window`, because the built-in types are
-        // incorrect. See https://github.com/Microsoft/TypeScript/issues/27929.
-        this._isInsideShadowRoot = rootNode instanceof (window as any).ShadowRoot;
-      }
+      this._isInsideShadowRoot = !!getShadowRoot(this._element.nativeElement);
     }
   }
 

src/material/autocomplete/autocomplete.spec.ts

@@ -1,7 +1,7 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW} from '@angular/cdk/keycodes';
 import {Overlay, OverlayContainer} from '@angular/cdk/overlay';
-import {_supportsShadowDom} from '@angular/cdk/platform';
+import {supportsShadowDom} from '@angular/cdk/platform';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
   MockNgZone,
@@ -539,7 +539,7 @@ describe('MatAutocomplete', () => {
 
   it('should not close the panel when clicking on the input inside shadow DOM', fakeAsync(() => {
        // This test is only relevant for Shadow DOM-capable browsers.
-       if (!_supportsShadowDom()) {
+       if (!supportsShadowDom()) {
          return;
        }
 

src/material/input/input.spec.ts

@@ -1,4 +1,4 @@
-import {Platform, PlatformModule, _supportsShadowDom} from '@angular/cdk/platform';
+import {Platform, PlatformModule, supportsShadowDom} from '@angular/cdk/platform';
 import {
   createFakeEvent,
   dispatchFakeEvent,
@@ -1519,7 +1519,7 @@ describe('MatInput with appearance', () => {
 
 
   it('should calculate the outline gaps inside the shadow DOM', fakeAsync(() => {
-    if (!_supportsShadowDom()) {
+    if (!supportsShadowDom()) {
       return;
     }
 

src/material/progress-spinner/progress-spinner.spec.ts

@@ -1,9 +1,8 @@
 import {TestBed, async, inject} from '@angular/core/testing';
 import {Component, ViewEncapsulation, ViewChild, ElementRef} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {Platform} from '@angular/cdk/platform';
+import {Platform, getShadowRoot} from '@angular/cdk/platform';
 import {CommonModule} from '@angular/common';
-import {_getShadowRoot} from './progress-spinner';
 import {
   MatProgressSpinnerModule,
   MatProgressSpinner,
@@ -366,7 +365,7 @@ describe('MatProgressSpinner', () => {
     fixture.detectChanges();
 
     const spinner = fixture.debugElement.query(By.css('mat-progress-spinner'))!.nativeElement;
-    const shadowRoot = _getShadowRoot(spinner, document) as HTMLElement;
+    const shadowRoot = getShadowRoot(spinner) as HTMLElement;
 
     expect(shadowRoot.querySelector('style[mat-spinner-animation="27"]')).toBeTruthy();
 
@@ -387,7 +386,7 @@ describe('MatProgressSpinner', () => {
     fixture.detectChanges();
 
     const spinner = fixture.debugElement.query(By.css('mat-progress-spinner'))!.nativeElement;
-    const shadowRoot = _getShadowRoot(spinner, document) as HTMLElement;
+    const shadowRoot = getShadowRoot(spinner) as HTMLElement;
 
     expect(shadowRoot.querySelectorAll('style[mat-spinner-animation="39"]').length).toBe(1);
 
@@ -418,7 +417,7 @@ describe('MatProgressSpinner', () => {
       fixture.detectChanges();
 
       const spinner = fixture.componentInstance.spinner.nativeElement;
-      const shadowRoot = _getShadowRoot(spinner, document) as HTMLElement;
+      const shadowRoot = getShadowRoot(spinner) as HTMLElement;
 
       expect(shadowRoot.querySelector('style[mat-spinner-animation="27"]')).toBeTruthy();
 

src/material/progress-spinner/progress-spinner.ts

@@ -7,7 +7,7 @@
  */
 
 import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
-import {Platform} from '@angular/cdk/platform';
+import {Platform, getShadowRoot} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -218,7 +218,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     // Note that we need to look up the root node in ngOnInit, rather than the constructor, because
     // Angular seems to create the element outside the shadow root and then moves it inside, if the
     // node is inside an `ngIf` and a ShadowDom-encapsulated component.
-    this._styleRoot = _getShadowRoot(element, this._document) || this._document.head;
+    this._styleRoot = getShadowRoot(element) || this._document.head;
     this._attachStyleNode();
 
     // On IE and Edge, we can't animate the `stroke-dashoffset`
@@ -333,26 +333,3 @@ export class MatSpinner extends MatProgressSpinner {
     this.mode = 'indeterminate';
   }
 }
-
-
-/** Gets the shadow root of an element, if supported and the element is inside the Shadow DOM. */
-export function _getShadowRoot(element: HTMLElement, _document: Document): Node | null {
-  // TODO(crisbeto): see whether we should move this into the CDK
-  // feature detection utilities once #15616 gets merged in.
-  if (typeof window !== 'undefined') {
-    const head = _document.head;
-
-    // Check whether the browser supports Shadow DOM.
-    if (head && ((head as any).createShadowRoot || head.attachShadow)) {
-      const rootNode = element.getRootNode ? element.getRootNode() : null;
-
-      // We need to take the `ShadowRoot` off of `window`, because the built-in types are
-      // incorrect. See https://github.com/Microsoft/TypeScript/issues/27929.
-      if (rootNode instanceof (window as any).ShadowRoot) {
-        return rootNode;
-      }
-    }
-  }
-
-  return null;
-}

tools/public_api_guard/cdk/platform.d.ts

@@ -1,7 +1,7 @@
-export declare function _supportsShadowDom(): boolean;
-
 export declare function getRtlScrollAxisType(): RtlScrollAxisType;
 
+export declare function getShadowRoot(element: HTMLElement): Node | null;
+
 export declare function getSupportedInputTypes(): Set<string>;
 
 export declare function normalizePassiveListenerOptions(options: AddEventListenerOptions): AddEventListenerOptions | boolean;
@@ -35,3 +35,5 @@ export declare const enum RtlScrollAxisType {
 export declare function supportsPassiveEventListeners(): boolean;
 
 export declare function supportsScrollBehavior(): boolean;
+
+export declare function supportsShadowDom(): boolean;