fix(material-experimental/mdc-chips): error on IE and Edge due… (#18074)

Fixes an error that was being thrown on click for the MDC-based chips, because we were trying to interact with the `classList` of a ripple. It seems like Edge doesn't support `classList` on elements outside the DOM.

Author: crisbeto

src/material-experimental/mdc-chips/chip-set.ts

@@ -294,7 +294,8 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
     let currentElement = event.target as HTMLElement | null;
 
     while (currentElement && currentElement !== this._elementRef.nativeElement) {
-      if (currentElement.classList.contains('mdc-chip')) {
+      // Null check the classList, because IE and Edge don't support it on all elements.
+      if (currentElement.classList && currentElement.classList.contains('mdc-chip')) {
         return true;
       }
 

src/material-experimental/mdc-chips/chip.ts

@@ -251,7 +251,10 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     addClassToLeadingIcon: (className) => this.leadingIcon.setClass(className, true),
     removeClassFromLeadingIcon: (className) => this.leadingIcon.setClass(className, false),
     eventTargetHasClass: (target: EventTarget | null, className: string) => {
-      return target ? (target as Element).classList.contains(className) : false;
+      // We need to null check the `classList`, because IE and Edge don't support it on SVG elements
+      // and Edge seems to throw for ripple elements, because they're outside the DOM.
+      return (target && (target as Element).classList) ?
+          (target as Element).classList.contains(className) : false;
     },
     notifyInteraction: () => this.interaction.emit(this.id),
     notifySelection: () => {