fix(material-experimental/mdc-list): avoid style conflicts with other list-based components

Currently the styles for the MDC-based list are included globally which causes conflicts with other list-based components like `mat-select` and `mat-autocomplete`. This can be seen by going to the MDC list demo and then the MDC select demo, and observing that the option text is now truncated.

These changes resolve the issue by nesting the styles under the `mat-mdc-list-base` class.

Author: crisbeto

src/material-experimental/mdc-list/_list-theme.scss

@@ -13,9 +13,11 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
-  // MDC's state styles are tied in with their ripple. Since we don't use the MDC
-  // ripple, we need to add the hover, focus and selected states manually.
-  @include interactive-list-theme.private-interactive-list-item-state-colors($config);
+  .mat-mdc-list-base {
+    // MDC's state styles are tied in with their ripple. Since we don't use the MDC
+    // ripple, we need to add the hover, focus and selected states manually.
+    @include interactive-list-theme.private-interactive-list-item-state-colors($config);
+  }
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-theme-styles-query);

src/material-experimental/mdc-list/action-list.ts

@@ -12,9 +12,9 @@ import {MatListBase} from './list-base';
 @Component({
   selector: 'mat-action-list',
   exportAs: 'matActionList',
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   host: {
-    'class': 'mat-mdc-action-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-action-list mat-mdc-list-base',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,

src/material-experimental/mdc-list/list.scss

@@ -3,12 +3,32 @@
 @use '../../material/core/style/layout-common';
 @use '../../cdk/a11y';
 
-@include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query);
-
 // MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
 // explicitly set `display: block`
 .mat-mdc-list-base {
+  // This mixin needs to be nested so that styles don't leak into other
+  // components based on the MDC list (e.g. select, autocomplete).
+  @include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query);
   display: block;
+
+  // MDC does have 2-line support, but it's a per-list setting, whereas ours applies to individual
+  // items. Therefore, we need to add our own styles.
+  .mat-mdc-2-line {
+    height: 72px;
+
+    .mdc-deprecated-list-item__text {
+      align-self: flex-start;
+    }
+  }
+
+  // MDC does not support more than 2 lines, so we need to add our own styles.
+  .mat-mdc-3-line {
+    height: 88px;
+
+    .mdc-deprecated-list-item__text {
+      align-self: flex-start;
+    }
+  }
 }
 
 // .mdc-deprecated-list-item__primary-text adds its own margin settings, so only reset if it doesn't
@@ -24,25 +44,6 @@
 }
 
 
-// MDC does have 2-line support, but it's a per-list setting, whereas ours applies to individual
-// items. Therefore, we need to add our own styles.
-.mat-mdc-2-line {
-  height: 72px;
-
-  .mdc-deprecated-list-item__text {
-    align-self: flex-start;
-  }
-}
-
-// MDC does not support more than 2 lines, so we need to add our own styles.
-.mat-mdc-3-line {
-  height: 88px;
-
-  .mdc-deprecated-list-item__text {
-    align-self: flex-start;
-  }
-}
-
 // MDC supports avatars, but it's a per-list setting, whereas ours applies to individual
 // items. Therefore, we need to add our own styles.
 .mat-mdc-list-avatar {
@@ -51,9 +52,12 @@
   $size: 40px;
   $margin-value: 72px - mdc-list.$deprecated-side-padding - $size;
 
-  width: $size;
-  height: $size;
-  border-radius: 50%;
+  // These styles need the extra specificity in order to override the ones from MDC.
+  .mat-mdc-list-base & {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+  }
 
   // Avatars that come before the text have the .mdc-deprecated-list-item__graphic class.
   // MDC's .mdc-deprecated-list--avatar-list class would normally apply overrides to set the

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

@@ -29,9 +29,9 @@ import {MatListBase, MatListItemBase} from './list-base';
 @Component({
   selector: 'mat-list',
   exportAs: 'matList',
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   host: {
-    'class': 'mat-mdc-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-list mat-mdc-list-base',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,

src/material-experimental/mdc-list/nav-list.ts

@@ -12,9 +12,9 @@ import {MatListBase} from './list-base';
 @Component({
   selector: 'mat-nav-list',
   exportAs: 'matNavList',
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   host: {
-    'class': 'mat-mdc-nav-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-nav-list mat-mdc-list-base',
   },
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,

src/material-experimental/mdc-list/selection-list.ts

@@ -60,11 +60,11 @@ export class MatSelectionListChange {
   selector: 'mat-selection-list',
   exportAs: 'matSelectionList',
   host: {
-    'class': 'mat-mdc-selection-list mat-mdc-list-base mdc-deprecated-list',
+    'class': 'mat-mdc-selection-list mat-mdc-list-base',
     'role': 'listbox',
     '[attr.aria-multiselectable]': 'multiple',
   },
-  template: '<ng-content></ng-content>',
+  template: '<div class="mdc-deprecated-list"><ng-content></ng-content></div>',
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
   providers: [