feat(material/core): Allow namespacing ripple-loader event handler (#28699)

ripple-loader registers an event handler on the document to do event delegation. If there are multiple instances of ripple-loader on one page, then they will both try to handle events for [mat-ripple-loader-uninitialized] elements. If a namespace is provided, then the handler will only handle events for [mat-ripple-loader-uninitialized="{namespace}"] elements.

Co-authored-by: Ryan Russell <[email protected]>

Author: RussellSprouts

src/material/core/private/ripple-loader.ts

@@ -88,7 +88,7 @@ export class MatRippleLoader implements OnDestroy {
     },
   ): void {
     // Indicates that the ripple has not yet been rendered for this component.
-    host.setAttribute(matRippleUninitialized, '');
+    host.setAttribute(matRippleUninitialized, this._globalRippleOptions?.namespace ?? '');
 
     // Store the additional class name(s) that should be added to the ripple element.
     if (config.className || !host.hasAttribute(matRippleClassName)) {
@@ -139,7 +139,9 @@ export class MatRippleLoader implements OnDestroy {
 
     // TODO(wagnermaciel): Consider batching these events to improve runtime performance.
 
-    const element = eventTarget.closest(`[${matRippleUninitialized}]`);
+    const element = eventTarget.closest(
+      `[${matRippleUninitialized}="${this._globalRippleOptions?.namespace ?? ''}"]`,
+    );
     if (element) {
       this._createRipple(element as HTMLElement);
     }

src/material/core/ripple/ripple.ts

@@ -42,6 +42,11 @@ export interface RippleGlobalOptions {
    * default, ripples will wait for the enter animation to complete and for mouse or touch release.
    */
   terminateOnPointerUp?: boolean;
+
+  /**
+   * A namespace to use for ripple loader to allow multiple instances to exist on the same page.
+   */
+  namespace?: string;
 }
 
 /** Injection token that can be used to specify the global ripple options. */