diff --git a/app/templates/custom-elements/overlay-panel.html b/app/templates/custom-elements/overlay-panel.html
index 115c63d12..d6f6a3d69 100644
--- a/app/templates/custom-elements/overlay-panel.html
+++ b/app/templates/custom-elements/overlay-panel.html
@@ -61,11 +61,13 @@
         />
       </svg>
     </button>
-    <slot></slot>
+    <slot id="dialog-slot"></slot>
   </dialog>
 </template>
 
 <script type="module">
+  import { DialogClosedEvent } from "/js/events.js";
+
   (function () {
     const template = document.querySelector("#overlay-panel-template");
 
@@ -99,10 +101,21 @@
               }
             }
           );
+          // Dispatch dialog-closed event into slotted element(s), to allow the
+          // dialog to react to it if need be (e.g., for performing clean-ups).
+          // In theory, there could be multiple elements in the slot, so they
+          // all need to receive the close event – hence the `forEach`. In
+          // reality, we usually only slot a single dialog element, though. It
+          // shouldn’t matter anyway, since the dialog-closed event handler is
+          // idempotent.
           this.shadowRoot
-            .getElementById("close-button")
-            .addEventListener("click", () => this.show(false));
-
+            .querySelector("#close-button")
+            .addEventListener("click", () =>
+              this.shadowRoot
+                .querySelector("#dialog-slot")
+                .assignedElements()
+                .forEach((el) => el.dispatchEvent(new DialogClosedEvent()))
+            );
           // Prevent auto-close behavior of native <dialog> if the user presses
           // the ESC key.
           this._elements.dialog.addEventListener("cancel", (evt) => {