fix: focus monitor-based styles not working in some cases inside shadow dom

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -18,6 +18,7 @@ import {
   OnDestroy,
   Optional,
   Output,
+  AfterViewInit,
 } from '@angular/core';
 import {Observable, of as observableOf, Subject, Subscription} from 'rxjs';
 import {coerceElement} from '@angular/cdk/coercion';
@@ -562,19 +563,24 @@ function getTarget(event: Event): HTMLElement|null {
 @Directive({
   selector: '[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]',
 })
-export class CdkMonitorFocus implements OnDestroy {
+export class CdkMonitorFocus implements AfterViewInit, OnDestroy {
   private _monitorSubscription: Subscription;
   @Output() cdkFocusChange = new EventEmitter<FocusOrigin>();
 
-  constructor(private _elementRef: ElementRef<HTMLElement>, private _focusMonitor: FocusMonitor) {
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _focusMonitor: FocusMonitor) {}
+
+  ngAfterViewInit() {
     this._monitorSubscription = this._focusMonitor.monitor(
-        this._elementRef,
-        this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
-        .subscribe(origin => this.cdkFocusChange.emit(origin));
+      this._elementRef,
+      this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
+      .subscribe(origin => this.cdkFocusChange.emit(origin));
   }
 
   ngOnDestroy() {
     this._focusMonitor.stopMonitoring(this._elementRef);
-    this._monitorSubscription.unsubscribe();
+
+    if (this._monitorSubscription) {
+      this._monitorSubscription.unsubscribe();
+    }
   }
 }

src/material/button-toggle/button-toggle.ts

@@ -30,6 +30,7 @@ import {
   ViewEncapsulation,
   InjectionToken,
   Inject,
+  AfterViewInit,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
@@ -394,7 +395,7 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa
     '(focus)': 'focus()',
   }
 })
-export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit,
+export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit, AfterViewInit,
   CanDisableRipple, OnDestroy {
 
   private _isSingleSelector = false;
@@ -512,7 +513,9 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
         group._syncButtonToggle(this, this._checked);
       }
     }
+  }
 
+  ngAfterViewInit() {
     this._focusMonitor.monitor(this._elementRef, true);
   }
 

src/material/button/button.spec.ts

@@ -72,6 +72,7 @@ describe('MatButton', () => {
 
   it('should be able to focus button with a specific focus origin', () => {
     const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
     const buttonDebugEl = fixture.debugElement.query(By.css('button'));
     const buttonInstance = buttonDebugEl.componentInstance as MatButton;
 

src/material/button/button.ts

@@ -18,6 +18,7 @@ import {
   Optional,
   Inject,
   Input,
+  AfterViewInit,
 } from '@angular/core';
 import {
   CanColor,
@@ -79,7 +80,7 @@ const _MatButtonMixinBase: CanDisableRippleCtor & CanDisableCtor & CanColorCtor
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatButton extends _MatButtonMixinBase
-    implements OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
+    implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
 
   /** Whether the button is round. */
   readonly isRoundButton: boolean = this._hasHostAttributes('mat-fab', 'mat-mini-fab');
@@ -108,13 +109,15 @@ export class MatButton extends _MatButtonMixinBase
     // the class is applied to derived classes.
     elementRef.nativeElement.classList.add('mat-button-base');
 
-    this._focusMonitor.monitor(this._elementRef, true);
-
     if (this.isRoundButton) {
       this.color = DEFAULT_ROUND_BUTTON_COLOR;
     }
   }
 
+  ngAfterViewInit() {
+    this._focusMonitor.monitor(this._elementRef, true);
+  }
+
   ngOnDestroy() {
     this._focusMonitor.stopMonitoring(this._elementRef);
   }

src/material/checkbox/checkbox.ts

@@ -221,7 +221,12 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
     this.tabIndex = parseInt(tabIndex) || 0;
 
-    this._focusMonitor.monitor(elementRef, true).subscribe(focusOrigin => {
+    // TODO: Remove this after the `_clickAction` parameter is removed as an injection parameter.
+    this._clickAction = this._clickAction || this._options.clickAction;
+  }
+
+  ngAfterViewInit() {
+    this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {
       if (!focusOrigin) {
         // When a focused element becomes disabled, the browser *immediately* fires a blur event.
         // Angular does not expect events to be raised during change detection, so any state change
@@ -230,16 +235,11 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
         // telling the form control it has been touched until the next tick.
         Promise.resolve().then(() => {
           this._onTouched();
-          _changeDetectorRef.markForCheck();
+          this._changeDetectorRef.markForCheck();
         });
       }
     });
 
-    // TODO: Remove this after the `_clickAction` parameter is removed as an injection parameter.
-    this._clickAction = this._clickAction || this._options.clickAction;
-  }
-
-  ngAfterViewInit() {
     this._syncIndeterminate(this._indeterminate);
   }
 

src/material/expansion/expansion-panel-header.ts

@@ -20,6 +20,7 @@ import {
   ViewEncapsulation,
   Optional,
   Inject,
+  AfterViewInit,
 } from '@angular/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {merge, Subscription, EMPTY} from 'rxjs';
@@ -64,7 +65,7 @@ import {MatAccordionTogglePosition} from './accordion-base';
     '(keydown)': '_keydown($event)',
   },
 })
-export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
+export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
   private _parentChangeSubscription = Subscription.EMPTY;
 
   constructor(
@@ -99,12 +100,6 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
       .pipe(filter(() => panel._containsFocus()))
       .subscribe(() => _focusMonitor.focusVia(_element, 'program'));
 
-    _focusMonitor.monitor(_element).subscribe(origin => {
-      if (origin && panel.accordion) {
-        panel.accordion._handleHeaderFocus(this);
-      }
-    });
-
     if (defaultOptions) {
       this.expandedHeight = defaultOptions.expandedHeight;
       this.collapsedHeight = defaultOptions.collapsedHeight;
@@ -201,6 +196,14 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
     this._focusMonitor.focusVia(this._element, origin, options);
   }
 
+  ngAfterViewInit() {
+    this._focusMonitor.monitor(this._element).subscribe(origin => {
+      if (origin && this.panel.accordion) {
+        this.panel.accordion._handleHeaderFocus(this);
+      }
+    });
+  }
+
   ngOnDestroy() {
     this._parentChangeSubscription.unsubscribe();
     this._focusMonitor.stopMonitoring(this._element);

src/material/input/input.ts

@@ -18,10 +18,10 @@ import {
   NgZone,
   OnChanges,
   OnDestroy,
-  OnInit,
   Optional,
   Self,
   HostListener,
+  AfterViewInit,
 } from '@angular/core';
 import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {
@@ -88,7 +88,7 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
   providers: [{provide: MatFormFieldControl, useExisting: MatInput}],
 })
 export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<any>, OnChanges,
-    OnDestroy, OnInit, DoCheck, CanUpdateErrorState {
+    OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState {
   protected _uid = `mat-input-${nextUniqueId++}`;
   protected _previousNativeValue: any;
   private _inputValueAccessor: {value: any};
@@ -277,7 +277,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     }
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     if (this._platform.isBrowser) {
       this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
         this.autofilled = event.isAutofilled;

src/material/menu/menu-item.ts

@@ -18,6 +18,7 @@ import {
   Optional,
   Input,
   HostListener,
+  AfterViewInit,
 } from '@angular/core';
 import {
   CanDisable, CanDisableCtor,
@@ -57,7 +58,7 @@ const _MatMenuItemMixinBase: CanDisableRippleCtor & CanDisableCtor & typeof MatM
   templateUrl: 'menu-item.html',
 })
 export class MatMenuItem extends _MatMenuItemMixinBase
-    implements FocusableOption, CanDisable, CanDisableRipple, OnDestroy {
+    implements FocusableOption, CanDisable, CanDisableRipple, AfterViewInit, OnDestroy {
 
   /** ARIA role for the menu item. */
   @Input() role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' = 'menuitem';
@@ -85,13 +86,6 @@ export class MatMenuItem extends _MatMenuItemMixinBase
     // @breaking-change 8.0.0 make `_focusMonitor` and `document` required params.
     super();
 
-    if (_focusMonitor) {
-      // Start monitoring the element so it gets the appropriate focused classes. We want
-      // to show the focus style for menu items only when the focus was not caused by a
-      // mouse or touch interaction.
-      _focusMonitor.monitor(this._elementRef, false);
-    }
-
     if (_parentMenu && _parentMenu.addItem) {
       _parentMenu.addItem(this);
     }
@@ -110,6 +104,15 @@ export class MatMenuItem extends _MatMenuItemMixinBase
     this._focused.next(this);
   }
 
+  ngAfterViewInit() {
+    if (this._focusMonitor) {
+      // Start monitoring the element so it gets the appropriate focused classes. We want
+      // to show the focus style for menu items only when the focus was not caused by a
+      // mouse or touch interaction.
+      this._focusMonitor.monitor(this._elementRef, false);
+    }
+  }
+
   ngOnDestroy() {
     if (this._focusMonitor) {
       this._focusMonitor.stopMonitoring(this._elementRef);

src/material/slider/slider.ts

@@ -36,12 +36,12 @@ import {
   Inject,
   Input,
   OnDestroy,
-  OnInit,
   Optional,
   Output,
   ViewChild,
   ViewEncapsulation,
   NgZone,
+  AfterViewInit,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
@@ -156,7 +156,7 @@ const _MatSliderMixinBase:
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatSlider extends _MatSliderMixinBase
-    implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit, HasTabIndex {
+    implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, AfterViewInit, HasTabIndex {
   /** Whether the slider is inverted. */
   @Input()
   get invert(): boolean { return this._invert; }
@@ -511,7 +511,7 @@ export class MatSlider extends _MatSliderMixinBase
     });
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this._focusMonitor
         .monitor(this._elementRef, true)
         .subscribe((origin: FocusOrigin) => {

src/material/sort/sort-header.ts

@@ -18,6 +18,7 @@ import {
   ViewEncapsulation,
   Inject,
   ElementRef,
+  AfterViewInit,
 } from '@angular/core';
 import {CanDisable, CanDisableCtor, mixinDisabled} from '@angular/material/core';
 import {FocusMonitor} from '@angular/cdk/a11y';
@@ -95,7 +96,7 @@ interface MatSortHeaderColumnDef {
   ]
 })
 export class MatSortHeader extends _MatSortHeaderMixinBase
-    implements CanDisable, MatSortable, OnDestroy, OnInit {
+    implements CanDisable, MatSortable, OnDestroy, OnInit, AfterViewInit {
   private _rerenderSubscription: Subscription;
 
   /**
@@ -168,11 +169,6 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
 
           changeDetectorRef.markForCheck();
         });
-
-    // We use the focus monitor because we also want to style
-    // things differently based on the focus origin.
-    _focusMonitor.monitor(_elementRef, true)
-        .subscribe(origin => this._setIndicatorHintVisible(!!origin));
   }
 
   ngOnInit() {
@@ -188,6 +184,13 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
     this._sort.register(this);
   }
 
+  ngAfterViewInit() {
+    // We use the focus monitor because we also want to style
+    // things differently based on the focus origin.
+    this._focusMonitor.monitor(this._elementRef, true)
+        .subscribe(origin => this._setIndicatorHintVisible(!!origin));
+  }
+
   ngOnDestroy() {
     this._focusMonitor.stopMonitoring(this._elementRef);
     this._sort.deregister(this);

src/material/stepper/step-header.ts

@@ -16,6 +16,7 @@ import {
   OnDestroy,
   ViewEncapsulation,
   TemplateRef,
+  AfterViewInit,
 } from '@angular/core';
 import {Subscription} from 'rxjs';
 import {MatStepLabel} from './step-label';
@@ -35,7 +36,7 @@ import {CdkStepHeader, StepState} from '@angular/cdk/stepper';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatStepHeader extends CdkStepHeader implements OnDestroy {
+export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDestroy {
   private _intlSubscription: Subscription;
 
   /** State of the given step. */
@@ -71,10 +72,13 @@ export class MatStepHeader extends CdkStepHeader implements OnDestroy {
     _elementRef: ElementRef<HTMLElement>,
     changeDetectorRef: ChangeDetectorRef) {
     super(_elementRef);
-    _focusMonitor.monitor(_elementRef, true);
     this._intlSubscription = _intl.changes.subscribe(() => changeDetectorRef.markForCheck());
   }
 
+  ngAfterViewInit() {
+    this._focusMonitor.monitor(this._elementRef, true);
+  }
+
   ngOnDestroy() {
     this._intlSubscription.unsubscribe();
     this._focusMonitor.stopMonitoring(this._elementRef);