fix(material-experimental/mdc-input): input should not inherit parent classnames (#18180)

Author: andrewseguin

src/material-experimental/mdc-input/input.ts

@@ -20,6 +20,10 @@ import {MatInput as BaseMatInput} from '@angular/material/input';
   exportAs: 'matInput',
   host: {
     'class': 'mat-mdc-input-element mdc-text-field__input',
+    // The BaseMatInput parent class adds `mat-input-element` and `mat-form-field-autofill-control`
+    // to the CSS classlist, but this should not be added for this MDC equivalent input.
+    '[class.mat-form-field-autofill-control]': 'false',
+    '[class.mat-input-element]': 'false',
     '[class.mat-input-server]': '_isServer',
     '[class.mat-mdc-textarea-input]': '_isTextarea()',
     // Native input properties that are overwritten by Angular inputs need to be synced with

src/material/input/input.ts

@@ -71,7 +71,8 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
     /**
      * @breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
      */
-    'class': 'mat-input-element mat-form-field-autofill-control',
+    '[class.mat-form-field-autofill-control]': 'true',
+    '[class.mat-input-element]': 'true',
     '[class.mat-input-server]': '_isServer',
     // Native input properties that are overwritten by Angular inputs need to be synced with
     // the native input element. Otherwise property bindings for those don't work.