@elementor/frontend-handlers 3.35.0-325 → 3.35.0-327

package/dist/index.d.mts

@@ -4,12 +4,15 @@ interface ListenToChildrenAPI {
     render: (callback: ChildRenderCallback) => void;
 }
 type ListenToChildrenFunction = (elementTypes: string[]) => ListenToChildrenAPI;
-type Handler = <TSettings extends Settings = Settings>(params: {
+type SharedHandlerParams<TSettings extends Settings = Settings> = {
     element: Element;
     signal: AbortSignal;
     settings: TSettings;
+};
+type Handler = <TSettings extends Settings = Settings>(params: SharedHandlerParams<TSettings> & {
     listenToChildren: ListenToChildrenFunction;
 }) => (() => void) | undefined;
+type SelectorHandler = <TSettings extends Settings = Settings>(params: SharedHandlerParams<TSettings>) => (() => void) | undefined;
 declare const register: ({ elementType, id, callback }: {
     elementType: string;
     id: string;
@@ -19,7 +22,16 @@ declare const unregister: ({ elementType, id }: {
     elementType: string;
     id?: string;
 }) => void;
+declare const registerBySelector: ({ id, selector, callback, }: {
+    selector: string;
+    id: string;
+    callback: SelectorHandler;
+}) => void;
+declare const unregisterBySelector: ({ selector, id }: {
+    selector: string;
+    id?: string;
+}) => void;
 
 declare function init(): void;
 
-export { init, register, unregister };
+export { init, register, registerBySelector, unregister, unregisterBySelector };

package/dist/index.d.ts

@@ -4,12 +4,15 @@ interface ListenToChildrenAPI {
     render: (callback: ChildRenderCallback) => void;
 }
 type ListenToChildrenFunction = (elementTypes: string[]) => ListenToChildrenAPI;
-type Handler = <TSettings extends Settings = Settings>(params: {
+type SharedHandlerParams<TSettings extends Settings = Settings> = {
     element: Element;
     signal: AbortSignal;
     settings: TSettings;
+};
+type Handler = <TSettings extends Settings = Settings>(params: SharedHandlerParams<TSettings> & {
     listenToChildren: ListenToChildrenFunction;
 }) => (() => void) | undefined;
+type SelectorHandler = <TSettings extends Settings = Settings>(params: SharedHandlerParams<TSettings>) => (() => void) | undefined;
 declare const register: ({ elementType, id, callback }: {
     elementType: string;
     id: string;
@@ -19,7 +22,16 @@ declare const unregister: ({ elementType, id }: {
     elementType: string;
     id?: string;
 }) => void;
+declare const registerBySelector: ({ id, selector, callback, }: {
+    selector: string;
+    id: string;
+    callback: SelectorHandler;
+}) => void;
+declare const unregisterBySelector: ({ selector, id }: {
+    selector: string;
+    id?: string;
+}) => void;
 
 declare function init(): void;
 
-export { init, register, unregister };
+export { init, register, registerBySelector, unregister, unregisterBySelector };

package/dist/index.js

@@ -22,36 +22,65 @@ var index_exports = {};
 __export(index_exports, {
   init: () => init,
   register: () => register,
-  unregister: () => unregister
+  registerBySelector: () => registerBySelector,
+  unregister: () => unregister,
+  unregisterBySelector: () => unregisterBySelector
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/handlers-registry.ts
-var handlers = /* @__PURE__ */ new Map();
+var elementTypeHandlers = /* @__PURE__ */ new Map();
+var elementSelectorHandlers = /* @__PURE__ */ new Map();
 var register = ({ elementType, id, callback }) => {
-  if (!handlers.has(elementType)) {
-    handlers.set(elementType, /* @__PURE__ */ new Map());
+  if (!elementTypeHandlers.has(elementType)) {
+    elementTypeHandlers.set(elementType, /* @__PURE__ */ new Map());
   }
-  if (!handlers.get(elementType)?.has(id)) {
-    handlers.get(elementType)?.set(id, callback);
+  if (!elementTypeHandlers.get(elementType)?.has(id)) {
+    elementTypeHandlers.get(elementType)?.set(id, callback);
   }
 };
 var unregister = ({ elementType, id }) => {
-  if (!handlers.has(elementType)) {
+  if (!elementTypeHandlers.has(elementType)) {
     return;
   }
   if (id) {
-    handlers.get(elementType)?.delete(id);
-    if (handlers.get(elementType)?.size === 0) {
-      handlers.delete(elementType);
+    elementTypeHandlers.get(elementType)?.delete(id);
+    if (elementTypeHandlers.get(elementType)?.size === 0) {
+      elementTypeHandlers.delete(elementType);
     }
   } else {
-    handlers.delete(elementType);
+    elementTypeHandlers.delete(elementType);
+  }
+};
+var registerBySelector = ({
+  id,
+  selector,
+  callback
+}) => {
+  if (!elementSelectorHandlers.has(selector)) {
+    elementSelectorHandlers.set(selector, /* @__PURE__ */ new Map());
+  }
+  if (!elementSelectorHandlers.get(selector)?.has(id)) {
+    elementSelectorHandlers.get(selector)?.set(id, callback);
+  }
+};
+var unregisterBySelector = ({ selector, id }) => {
+  if (!elementSelectorHandlers.has(selector)) {
+    return;
+  }
+  if (id) {
+    elementTypeHandlers.get(selector)?.delete(id);
+    if (elementTypeHandlers.get(selector)?.size === 0) {
+      elementTypeHandlers.delete(selector);
+    }
+  } else {
+    elementTypeHandlers.delete(selector);
   }
 };
 
 // src/lifecycle-events.ts
-var unmountCallbacks = /* @__PURE__ */ new Map();
+var unmountElementTypeCallbacks = /* @__PURE__ */ new Map();
+var unmountElementSelectorCallbacks = /* @__PURE__ */ new Map();
 var ELEMENT_RENDERED_EVENT_NAME = "elementor/element/rendered";
 var onElementRender = ({
   element,
@@ -70,10 +99,10 @@ var onElementRender = ({
       }
     })
   );
-  if (!handlers.has(elementType)) {
+  if (!elementTypeHandlers.has(elementType)) {
     return;
   }
-  Array.from(handlers.get(elementType)?.values() ?? []).forEach((handler) => {
+  Array.from(elementTypeHandlers.get(elementType)?.values() ?? []).forEach((handler) => {
     const settings = element.getAttribute("data-e-settings");
     const listenToChildren = (elementTypes) => ({
       render: (callback) => {
@@ -101,23 +130,53 @@ var onElementRender = ({
       manualUnmount.push(unmount);
     }
   });
-  if (!unmountCallbacks.has(elementType)) {
-    unmountCallbacks.set(elementType, /* @__PURE__ */ new Map());
+  if (!unmountElementTypeCallbacks.has(elementType)) {
+    unmountElementTypeCallbacks.set(elementType, /* @__PURE__ */ new Map());
   }
-  unmountCallbacks.get(elementType)?.set(elementId, () => {
+  unmountElementTypeCallbacks.get(elementType)?.set(elementId, () => {
     controller.abort();
     manualUnmount.forEach((callback) => callback());
   });
 };
+var onElementSelectorRender = ({
+  element,
+  elementId,
+  controller
+}) => {
+  Array.from(elementSelectorHandlers.entries() ?? []).forEach(([selector, handlers]) => {
+    if (!element.matches(selector)) {
+      return;
+    }
+    const manualUnmount = [];
+    Array.from(handlers.values() ?? []).forEach((handler) => {
+      const settings = element.getAttribute("data-e-settings");
+      const unmount = handler({
+        element,
+        signal: controller.signal,
+        settings: settings ? JSON.parse(settings) : {}
+      });
+      if (typeof unmount === "function") {
+        manualUnmount.push(unmount);
+      }
+    });
+    if (!unmountElementSelectorCallbacks.has(elementId)) {
+      unmountElementTypeCallbacks.set(elementId, /* @__PURE__ */ new Map());
+    }
+    unmountElementSelectorCallbacks.get(elementId)?.set(selector, () => {
+      controller.abort();
+      manualUnmount.forEach((callback) => callback());
+    });
+  });
+};
 var onElementDestroy = ({ elementType, elementId }) => {
-  const unmount = unmountCallbacks.get(elementType)?.get(elementId);
+  const unmount = unmountElementTypeCallbacks.get(elementType)?.get(elementId);
   if (!unmount) {
     return;
   }
   unmount();
-  unmountCallbacks.get(elementType)?.delete(elementId);
-  if (unmountCallbacks.get(elementType)?.size === 0) {
-    unmountCallbacks.delete(elementType);
+  unmountElementTypeCallbacks.get(elementType)?.delete(elementId);
+  if (unmountElementTypeCallbacks.get(elementType)?.size === 0) {
+    unmountElementTypeCallbacks.delete(elementType);
   }
 };
 
@@ -135,6 +194,7 @@ function init() {
     onElementDestroy({ elementType: type, elementId: id });
   });
   document.addEventListener("DOMContentLoaded", () => {
+    const controller = new AbortController();
     document.querySelectorAll("[data-e-type]").forEach((element) => {
       const el = element;
       const { eType, id } = el.dataset;
@@ -151,12 +211,25 @@ function init() {
         })
       );
     });
+    Array.from(elementSelectorHandlers.keys()).forEach((selector) => {
+      Array.from(document.querySelectorAll(selector)).forEach((element) => {
+        const el = element;
+        const elementId = el?.closest("[data-id]")?.getAttribute("data-id") ?? "";
+        onElementSelectorRender({
+          element,
+          controller,
+          elementId
+        });
+      });
+    });
   });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   init,
   register,
-  unregister
+  registerBySelector,
+  unregister,
+  unregisterBySelector
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -1,29 +1,56 @@
 // src/handlers-registry.ts
-var handlers = /* @__PURE__ */ new Map();
+var elementTypeHandlers = /* @__PURE__ */ new Map();
+var elementSelectorHandlers = /* @__PURE__ */ new Map();
 var register = ({ elementType, id, callback }) => {
-  if (!handlers.has(elementType)) {
-    handlers.set(elementType, /* @__PURE__ */ new Map());
+  if (!elementTypeHandlers.has(elementType)) {
+    elementTypeHandlers.set(elementType, /* @__PURE__ */ new Map());
   }
-  if (!handlers.get(elementType)?.has(id)) {
-    handlers.get(elementType)?.set(id, callback);
+  if (!elementTypeHandlers.get(elementType)?.has(id)) {
+    elementTypeHandlers.get(elementType)?.set(id, callback);
   }
 };
 var unregister = ({ elementType, id }) => {
-  if (!handlers.has(elementType)) {
+  if (!elementTypeHandlers.has(elementType)) {
     return;
   }
   if (id) {
-    handlers.get(elementType)?.delete(id);
-    if (handlers.get(elementType)?.size === 0) {
-      handlers.delete(elementType);
+    elementTypeHandlers.get(elementType)?.delete(id);
+    if (elementTypeHandlers.get(elementType)?.size === 0) {
+      elementTypeHandlers.delete(elementType);
     }
   } else {
-    handlers.delete(elementType);
+    elementTypeHandlers.delete(elementType);
+  }
+};
+var registerBySelector = ({
+  id,
+  selector,
+  callback
+}) => {
+  if (!elementSelectorHandlers.has(selector)) {
+    elementSelectorHandlers.set(selector, /* @__PURE__ */ new Map());
+  }
+  if (!elementSelectorHandlers.get(selector)?.has(id)) {
+    elementSelectorHandlers.get(selector)?.set(id, callback);
+  }
+};
+var unregisterBySelector = ({ selector, id }) => {
+  if (!elementSelectorHandlers.has(selector)) {
+    return;
+  }
+  if (id) {
+    elementTypeHandlers.get(selector)?.delete(id);
+    if (elementTypeHandlers.get(selector)?.size === 0) {
+      elementTypeHandlers.delete(selector);
+    }
+  } else {
+    elementTypeHandlers.delete(selector);
   }
 };
 
 // src/lifecycle-events.ts
-var unmountCallbacks = /* @__PURE__ */ new Map();
+var unmountElementTypeCallbacks = /* @__PURE__ */ new Map();
+var unmountElementSelectorCallbacks = /* @__PURE__ */ new Map();
 var ELEMENT_RENDERED_EVENT_NAME = "elementor/element/rendered";
 var onElementRender = ({
   element,
@@ -42,10 +69,10 @@ var onElementRender = ({
       }
     })
   );
-  if (!handlers.has(elementType)) {
+  if (!elementTypeHandlers.has(elementType)) {
     return;
   }
-  Array.from(handlers.get(elementType)?.values() ?? []).forEach((handler) => {
+  Array.from(elementTypeHandlers.get(elementType)?.values() ?? []).forEach((handler) => {
     const settings = element.getAttribute("data-e-settings");
     const listenToChildren = (elementTypes) => ({
       render: (callback) => {
@@ -73,23 +100,53 @@ var onElementRender = ({
       manualUnmount.push(unmount);
     }
   });
-  if (!unmountCallbacks.has(elementType)) {
-    unmountCallbacks.set(elementType, /* @__PURE__ */ new Map());
+  if (!unmountElementTypeCallbacks.has(elementType)) {
+    unmountElementTypeCallbacks.set(elementType, /* @__PURE__ */ new Map());
   }
-  unmountCallbacks.get(elementType)?.set(elementId, () => {
+  unmountElementTypeCallbacks.get(elementType)?.set(elementId, () => {
     controller.abort();
     manualUnmount.forEach((callback) => callback());
   });
 };
+var onElementSelectorRender = ({
+  element,
+  elementId,
+  controller
+}) => {
+  Array.from(elementSelectorHandlers.entries() ?? []).forEach(([selector, handlers]) => {
+    if (!element.matches(selector)) {
+      return;
+    }
+    const manualUnmount = [];
+    Array.from(handlers.values() ?? []).forEach((handler) => {
+      const settings = element.getAttribute("data-e-settings");
+      const unmount = handler({
+        element,
+        signal: controller.signal,
+        settings: settings ? JSON.parse(settings) : {}
+      });
+      if (typeof unmount === "function") {
+        manualUnmount.push(unmount);
+      }
+    });
+    if (!unmountElementSelectorCallbacks.has(elementId)) {
+      unmountElementTypeCallbacks.set(elementId, /* @__PURE__ */ new Map());
+    }
+    unmountElementSelectorCallbacks.get(elementId)?.set(selector, () => {
+      controller.abort();
+      manualUnmount.forEach((callback) => callback());
+    });
+  });
+};
 var onElementDestroy = ({ elementType, elementId }) => {
-  const unmount = unmountCallbacks.get(elementType)?.get(elementId);
+  const unmount = unmountElementTypeCallbacks.get(elementType)?.get(elementId);
   if (!unmount) {
     return;
   }
   unmount();
-  unmountCallbacks.get(elementType)?.delete(elementId);
-  if (unmountCallbacks.get(elementType)?.size === 0) {
-    unmountCallbacks.delete(elementType);
+  unmountElementTypeCallbacks.get(elementType)?.delete(elementId);
+  if (unmountElementTypeCallbacks.get(elementType)?.size === 0) {
+    unmountElementTypeCallbacks.delete(elementType);
   }
 };
 
@@ -107,6 +164,7 @@ function init() {
     onElementDestroy({ elementType: type, elementId: id });
   });
   document.addEventListener("DOMContentLoaded", () => {
+    const controller = new AbortController();
     document.querySelectorAll("[data-e-type]").forEach((element) => {
       const el = element;
       const { eType, id } = el.dataset;
@@ -123,11 +181,24 @@ function init() {
         })
       );
     });
+    Array.from(elementSelectorHandlers.keys()).forEach((selector) => {
+      Array.from(document.querySelectorAll(selector)).forEach((element) => {
+        const el = element;
+        const elementId = el?.closest("[data-id]")?.getAttribute("data-id") ?? "";
+        onElementSelectorRender({
+          element,
+          controller,
+          elementId
+        });
+      });
+    });
   });
 }
 export {
   init,
   register,
-  unregister
+  registerBySelector,
+  unregister,
+  unregisterBySelector
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/frontend-handlers",
   "description": "Elementor Frontend Handlers",
-  "version": "3.35.0-325",
+  "version": "3.35.0-327",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { handlers } from '../handlers-registry';
+import { elementTypeHandlers } from '../handlers-registry';
 import { init, register, unregister } from '../index';
 
 describe( 'Frontend Handlers', () => {
@@ -11,7 +11,7 @@ describe( 'Frontend Handlers', () => {
 	} );
 
 	beforeEach( () => {
-		handlers.clear();
+		elementTypeHandlers.clear();
 		document.body.innerHTML = '';
 	} );
 
@@ -545,7 +545,7 @@ describe( 'Frontend Handlers', () => {
 	describe( 'DOMContentLoaded Initialization', () => {
 		it( 'should initialize all existing elements on page load', () => {
 			// Arrange
-			handlers.clear();
+			elementTypeHandlers.clear();
 			document.body.innerHTML = '';
 
 			const initializedElements: string[] = [];

package/src/handlers-registry.ts

@@ -8,37 +8,81 @@ interface ListenToChildrenAPI {
 
 type ListenToChildrenFunction = ( elementTypes: string[] ) => ListenToChildrenAPI;
 
-type Handler = < TSettings extends Settings = Settings >( params: {
+type SharedHandlerParams< TSettings extends Settings = Settings > = {
 	element: Element;
 	signal: AbortSignal;
 	settings: TSettings;
-	listenToChildren: ListenToChildrenFunction;
-} ) => ( () => void ) | undefined;
+};
+
+export type Handler = < TSettings extends Settings = Settings >(
+	params: SharedHandlerParams< TSettings > & {
+		listenToChildren: ListenToChildrenFunction;
+	}
+) => ( () => void ) | undefined;
 
-export const handlers: Map< string, Map< string, Handler > > = new Map();
+export type SelectorHandler = < TSettings extends Settings = Settings >(
+	params: SharedHandlerParams< TSettings >
+) => ( () => void ) | undefined;
+
+export const elementTypeHandlers: Map< string, Map< string, Handler > > = new Map();
+export const elementSelectorHandlers: Map< string, Map< string, SelectorHandler > > = new Map();
 
 export const register = ( { elementType, id, callback }: { elementType: string; id: string; callback: Handler } ) => {
-	if ( ! handlers.has( elementType ) ) {
-		handlers.set( elementType, new Map() );
+	if ( ! elementTypeHandlers.has( elementType ) ) {
+		elementTypeHandlers.set( elementType, new Map() );
 	}
 
-	if ( ! handlers.get( elementType )?.has( id ) ) {
-		handlers.get( elementType )?.set( id, callback );
+	if ( ! elementTypeHandlers.get( elementType )?.has( id ) ) {
+		elementTypeHandlers.get( elementType )?.set( id, callback );
 	}
 };
 
 export const unregister = ( { elementType, id }: { elementType: string; id?: string } ) => {
-	if ( ! handlers.has( elementType ) ) {
+	if ( ! elementTypeHandlers.has( elementType ) ) {
+		return;
+	}
+
+	if ( id ) {
+		elementTypeHandlers.get( elementType )?.delete( id );
+
+		if ( elementTypeHandlers.get( elementType )?.size === 0 ) {
+			elementTypeHandlers.delete( elementType );
+		}
+	} else {
+		elementTypeHandlers.delete( elementType );
+	}
+};
+
+export const registerBySelector = ( {
+	id,
+	selector,
+	callback,
+}: {
+	selector: string;
+	id: string;
+	callback: SelectorHandler;
+} ) => {
+	if ( ! elementSelectorHandlers.has( selector ) ) {
+		elementSelectorHandlers.set( selector, new Map() );
+	}
+
+	if ( ! elementSelectorHandlers.get( selector )?.has( id ) ) {
+		elementSelectorHandlers.get( selector )?.set( id, callback );
+	}
+};
+
+export const unregisterBySelector = ( { selector, id }: { selector: string; id?: string } ) => {
+	if ( ! elementSelectorHandlers.has( selector ) ) {
 		return;
 	}
 
 	if ( id ) {
-		handlers.get( elementType )?.delete( id );
+		elementTypeHandlers.get( selector )?.delete( id );
 
-		if ( handlers.get( elementType )?.size === 0 ) {
-			handlers.delete( elementType );
+		if ( elementTypeHandlers.get( selector )?.size === 0 ) {
+			elementTypeHandlers.delete( selector );
 		}
 	} else {
-		handlers.delete( elementType );
+		elementTypeHandlers.delete( selector );
 	}
 };

package/src/index.ts

@@ -1,3 +1,3 @@
-export { register, unregister } from './handlers-registry';
+export { register, unregister, registerBySelector, unregisterBySelector } from './handlers-registry';
 
 export { init } from './init';

package/src/init.ts

@@ -1,4 +1,5 @@
-import { onElementDestroy, onElementRender } from './lifecycle-events';
+import { elementSelectorHandlers } from './handlers-registry';
+import { onElementDestroy, onElementRender, onElementSelectorRender } from './lifecycle-events';
 
 export function init() {
 	window.addEventListener( 'elementor/element/render', ( _event ) => {
@@ -19,6 +20,8 @@ export function init() {
 	} );
 
 	document.addEventListener( 'DOMContentLoaded', () => {
+		const controller = new AbortController();
+
 		document.querySelectorAll( '[data-e-type]' ).forEach( ( element ) => {
 			const el = element as HTMLElement;
 
@@ -38,5 +41,18 @@ export function init() {
 				} )
 			);
 		} );
+
+		Array.from( elementSelectorHandlers.keys() ).forEach( ( selector ) => {
+			Array.from( document.querySelectorAll( selector ) ).forEach( ( element ) => {
+				const el = element as HTMLElement;
+				const elementId = el?.closest( '[data-id]' )?.getAttribute( 'data-id' ) ?? '';
+
+				onElementSelectorRender( {
+					element,
+					controller,
+					elementId,
+				} );
+			} );
+		} );
 	} );
 }

package/src/lifecycle-events.ts

@@ -1,6 +1,7 @@
-import { handlers } from './handlers-registry';
+import { elementSelectorHandlers, elementTypeHandlers } from './handlers-registry';
 
-const unmountCallbacks: Map< string, Map< string, () => void > > = new Map();
+const unmountElementTypeCallbacks: Map< string, Map< string, () => void > > = new Map();
+const unmountElementSelectorCallbacks: Map< string, Map< string, () => void > > = new Map();
 
 const ELEMENT_RENDERED_EVENT_NAME = 'elementor/element/rendered';
 
@@ -27,11 +28,11 @@ export const onElementRender = ( {
 		} )
 	);
 
-	if ( ! handlers.has( elementType ) ) {
+	if ( ! elementTypeHandlers.has( elementType ) ) {
 		return;
 	}
 
-	Array.from( handlers.get( elementType )?.values() ?? [] ).forEach( ( handler ) => {
+	Array.from( elementTypeHandlers.get( elementType )?.values() ?? [] ).forEach( ( handler ) => {
 		const settings = element.getAttribute( 'data-e-settings' );
 
 		const listenToChildren = ( elementTypes: string[] ) => ( {
@@ -66,19 +67,61 @@ export const onElementRender = ( {
 		}
 	} );
 
-	if ( ! unmountCallbacks.has( elementType ) ) {
-		unmountCallbacks.set( elementType, new Map() );
+	if ( ! unmountElementTypeCallbacks.has( elementType ) ) {
+		unmountElementTypeCallbacks.set( elementType, new Map() );
 	}
 
-	unmountCallbacks.get( elementType )?.set( elementId, () => {
+	unmountElementTypeCallbacks.get( elementType )?.set( elementId, () => {
 		controller.abort();
 
 		manualUnmount.forEach( ( callback ) => callback() );
 	} );
 };
 
+export const onElementSelectorRender = ( {
+	element,
+	elementId,
+	controller,
+}: {
+	element: Element;
+	elementId: string;
+	controller: AbortController;
+} ) => {
+	Array.from( elementSelectorHandlers.entries() ?? [] ).forEach( ( [ selector, handlers ] ) => {
+		if ( ! element.matches( selector ) ) {
+			return;
+		}
+
+		const manualUnmount: ( () => void )[] = [];
+
+		Array.from( handlers.values() ?? [] ).forEach( ( handler ) => {
+			const settings = element.getAttribute( 'data-e-settings' );
+
+			const unmount = handler( {
+				element,
+				signal: controller.signal,
+				settings: settings ? JSON.parse( settings ) : {},
+			} );
+
+			if ( typeof unmount === 'function' ) {
+				manualUnmount.push( unmount );
+			}
+		} );
+
+		if ( ! unmountElementSelectorCallbacks.has( elementId ) ) {
+			unmountElementTypeCallbacks.set( elementId, new Map() );
+		}
+
+		unmountElementSelectorCallbacks.get( elementId )?.set( selector, () => {
+			controller.abort();
+
+			manualUnmount.forEach( ( callback ) => callback() );
+		} );
+	} );
+};
+
 export const onElementDestroy = ( { elementType, elementId }: { elementType: string; elementId: string } ) => {
-	const unmount = unmountCallbacks.get( elementType )?.get( elementId );
+	const unmount = unmountElementTypeCallbacks.get( elementType )?.get( elementId );
 
 	if ( ! unmount ) {
 		return;
@@ -86,9 +129,9 @@ export const onElementDestroy = ( { elementType, elementId }: { elementType: str
 
 	unmount();
 
-	unmountCallbacks.get( elementType )?.delete( elementId );
+	unmountElementTypeCallbacks.get( elementType )?.delete( elementId );
 
-	if ( unmountCallbacks.get( elementType )?.size === 0 ) {
-		unmountCallbacks.delete( elementType );
+	if ( unmountElementTypeCallbacks.get( elementType )?.size === 0 ) {
+		unmountElementTypeCallbacks.delete( elementType );
 	}
 };