fix(material/timepicker): TimepickerInput component in shadow DOM

Fixes an issue where the value of the input element referenced by a
TimepickerInput component inside a shadow DOM was getting formatted too
often due to `TimepickerInput._hasFocus()` assuming the component wasn't
in the shadow DOM.

Fixes #30641

Author: Caleb Kish

src/material/timepicker/timepicker-input.ts

@@ -42,6 +42,7 @@ import {Subscription} from 'rxjs';
 import {DOWN_ARROW, ESCAPE, hasModifierKey, UP_ARROW} from '@angular/cdk/keycodes';
 import {validateAdapter} from './util';
 import {DOCUMENT} from '@angular/common';
+import {_getShadowRoot} from '../../cdk/platform';
 
 /**
  * Input that can be used to enter time and connect to a `mat-timepicker`.
@@ -406,7 +407,8 @@ export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, O
 
   /** Whether the input is currently focused. */
   private _hasFocus(): boolean {
-    return this._document.activeElement === this._elementRef.nativeElement;
+    const root = _getShadowRoot(this._elementRef.nativeElement) || this._document;
+    return root.activeElement === this._elementRef.nativeElement;
   }
 
   /** Gets a function that can be used to validate the input. */

src/material/timepicker/timepicker.spec.ts

@@ -1,4 +1,4 @@
-import {Component, inject, Provider, signal, ViewChild} from '@angular/core';
+import {Component, inject, Provider, signal, ViewChild, ViewEncapsulation} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {DateAdapter, provideNativeDateAdapter} from '../core';
@@ -150,6 +150,14 @@ describe('MatTimepicker', () => {
       expect(input.value).toBe('9:31 AM');
     });
 
+    it('should not format input value when focused and in shadow DOM', () => {
+      const fixture = TestBed.createComponent(TimepickerInShadowDom);
+      const input = getInput(fixture);
+      typeInElement(input, '13:37');
+      fixture.detectChanges();
+      expect(input.value).toBe('13:37');
+    });
+
     it('should reformat the input value when the locale changes', () => {
       const fixture = TestBed.createComponent(StandaloneTimepicker);
       const input = getInput(fixture);
@@ -1413,3 +1421,13 @@ class TimepickerWithMultipleInputs {}
 class TimepickerWithoutInput {
   @ViewChild(MatTimepicker) timepicker: MatTimepicker<Date>;
 }
+
+@Component({
+  template: `
+    <input [matTimepicker]="picker" />
+    <mat-timepicker #picker />
+  `,
+  imports: [MatTimepicker, MatTimepickerInput],
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+class TimepickerInShadowDom {}