Allow specifying dialog_root_selector in dialog component

client/src/includes/dialog.js

@@ -6,7 +6,13 @@ export const dialog = (
   dialogs.forEach((template) => {
     const html = document.documentElement;
     const templateContent = template.content.firstElementChild;
-    document.body.appendChild(templateContent);
+
+    const { dialogRootSelector } = templateContent.dataset;
+    const dialogRoot =
+      (dialogRootSelector && document.querySelector(dialogRootSelector)) ||
+      document.body;
+    dialogRoot.appendChild(templateContent);
+
     const dialogTemplate = new A11yDialog(templateContent);
 
     // Prevent scrolling when dialog is open

wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html

@@ -5,6 +5,9 @@
         aria-labelledby="title-{{ id }}"
         aria-hidden="true"
         class="w-dialog"
+        {% if dialog_root_selector %}
+            data-dialog-root-selector="{{ dialog_root_selector }}"
+        {% endif %}
         {% if data_url %}
             data-url="{{ data_url }}"
         {% endif %}