fix(menu): make overriding default styles less likely

fixes #4160

A workaround to lessen the likelihood of someone's styles clashing with the default light dom styles of md-menu and md-select. It's difficult to tell whether a slotted element will animate and fire animation events, so tihs is a bit of a workaround for now.

PiperOrigin-RevId: 558910594

Author: Elliott Marquez

menu/internal/_menu.scss

@@ -95,7 +95,7 @@
       overflow: hidden;
     }
 
-    &.animating ::slotted(.hidden) {
+    &.animating ::slotted(.md-menu-hidden) {
       opacity: 0;
     }
 

menu/internal/menu.ts

@@ -481,9 +481,9 @@ export abstract class Menu extends LitElement {
 
       // Make them all initially hidden and then clean up at the end of each
       // animation.
-      child.classList.toggle('hidden', true);
+      child.classList.toggle('md-menu-hidden', true);
       animation.addEventListener('finish', () => {
-        child.classList.toggle('hidden', false);
+        child.classList.toggle('md-menu-hidden', false);
       });
 
       childrenAnimations.push([child, animation]);
@@ -494,7 +494,7 @@ export abstract class Menu extends LitElement {
       upPositionCorrectionAnimation.cancel();
       surfaceOpacityAnimation.cancel();
       childrenAnimations.forEach(([child, animation]) => {
-        child.classList.toggle('hidden', false);
+        child.classList.toggle('md-menu-hidden', false);
         animation.cancel();
       });
     });
@@ -596,7 +596,7 @@ export abstract class Menu extends LitElement {
       // Make sure the items stay hidden at the end of each child animation.
       // We clean this up at the end of the overall animation.
       animation.addEventListener('finish', () => {
-        child.classList.toggle('hidden', true);
+        child.classList.toggle('md-menu-hidden', true);
       });
       childrenAnimations.push([child, animation]);
     }
@@ -607,15 +607,15 @@ export abstract class Menu extends LitElement {
       surfaceOpacityAnimation.cancel();
       childrenAnimations.forEach(([child, animation]) => {
         animation.cancel();
-        child.classList.toggle('hidden', false);
+        child.classList.toggle('md-menu-hidden', false);
       });
       reject();
     });
 
     surfaceHeightAnimation.addEventListener('finish', () => {
       surfaceEl.classList.toggle('animating', false);
       childrenAnimations.forEach(([child]) => {
-        child.classList.toggle('hidden', false);
+        child.classList.toggle('md-menu-hidden', false);
       });
       this.openCloseAnimationSignal.finish();
       this.dispatchEvent(new Event('closed'));