diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts index 9c5c067d..2bc5c8c0 100644 --- a/src/runtime/utils.ts +++ b/src/runtime/utils.ts @@ -28,12 +28,18 @@ export function batched(callback: Callback): Callback { } export function validateTarget(target: HTMLElement) { - if (!(target instanceof HTMLElement)) { - throw new OwlError("Cannot mount component: the target is not a valid DOM element"); - } - if (!document.body.contains(target)) { - throw new OwlError("Cannot mount a component on a detached dom node"); + // Get the document and HTMLElement corresponding to the target to allow mounting in iframes + const document = target && target.ownerDocument; + if (document) { + const HTMLElement = document.defaultView!.HTMLElement; + if (target instanceof HTMLElement) { + if (!document.body.contains(target)) { + throw new OwlError("Cannot mount a component on a detached dom node"); + } + return; + } } + throw new OwlError("Cannot mount component: the target is not a valid DOM element"); } export class EventBus extends EventTarget { diff --git a/tests/app/__snapshots__/app.test.ts.snap b/tests/app/__snapshots__/app.test.ts.snap index 010c4172..bbb6fabe 100644 --- a/tests/app/__snapshots__/app.test.ts.snap +++ b/tests/app/__snapshots__/app.test.ts.snap @@ -29,6 +29,19 @@ exports[`app can configure an app with props 1`] = ` }" `; +exports[`app can mount app in an iframe 1`] = ` +"function anonymous(app, bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, comment } = bdom; + + let block1 = createBlock(\`