diff --git a/core/src/components/modal/test/inline/e2e.ts b/core/src/components/modal/test/inline/e2e.ts
index 4eeef862e1..5b4665792c 100644
--- a/core/src/components/modal/test/inline/e2e.ts
+++ b/core/src/components/modal/test/inline/e2e.ts
@@ -12,6 +12,10 @@ test('modal: inline', async () => {
   expect(modal).not.toBe(null);
   await modal.waitForVisible();
 
+  const container = await modal.find('.ion-page');
+
+  expect(container).not.toBe(null);
+
   screenshotCompares.push(await page.compareScreenshot());
 
   await modal.callMethod('dismiss');
diff --git a/core/src/utils/framework-delegate.ts b/core/src/utils/framework-delegate.ts
index 997d87e208..0482ceaa47 100644
--- a/core/src/utils/framework-delegate.ts
+++ b/core/src/utils/framework-delegate.ts
@@ -89,6 +89,15 @@ export const CoreDelegate = () => {
       BaseComponent.appendChild(el);
 
       await new Promise(resolve => componentOnReady(el, resolve));
+    } else {
+      // If there is no component, then we need to create a new parent
+      // element to apply the css classes to.
+      const el = BaseComponent.ownerDocument && BaseComponent.ownerDocument.createElement('div');
+      cssClasses.forEach(c => el.classList.add(c));
+      // Move each child from the original template to the new parent element.
+      el.append(...BaseComponent.children);
+      // Append the new parent element to the original parent element.
+      BaseComponent.appendChild(el);
     }
 
     /**