diff --git a/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts b/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts index 108c351cb..4913265f5 100644 --- a/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts +++ b/packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts @@ -546,6 +546,25 @@ describe('Content Script UIs', () => { ] as const)( 'built-in UI type: $name', ({ name, createUiFunction, uiSelector }) => { + it('should mount if an anchor already exists at the initialization', async () => { + const onMount = vi.fn(appendTestApp); + ui = await createUiFunction(ctx, { + position: 'inline', + onMount, + anchor: `#parent > #${DYNAMIC_CHILD_ID}`, + page: name === 'iframe' ? '/page.html' : undefined, + name: 'test-component', + }); + + appendTestElement({ id: DYNAMIC_CHILD_ID }); + ui.autoMount(); + await runMicrotasks(); + + await expect + .poll(() => document.querySelector(uiSelector)) + .not.toBeNull(); + }); + it('should mount when an anchor is dynamically added and unmount when an anchor is removed', async () => { const onMount = vi.fn(appendTestApp); const onRemove = vi.fn(); diff --git a/packages/wxt/src/client/content-scripts/ui/index.ts b/packages/wxt/src/client/content-scripts/ui/index.ts index a7d91a865..49182bb40 100644 --- a/packages/wxt/src/client/content-scripts/ui/index.ts +++ b/packages/wxt/src/client/content-scripts/ui/index.ts @@ -355,6 +355,11 @@ function autoMountUi( async function observeElement(selector: string | null | undefined) { let isAnchorExist = !!getAnchor(options); + // Mount if anchor exists at initialization. + if (isAnchorExist) { + uiCallbacks.mount(); + } + while (!abortController.signal.aborted) { try { const changedAnchor = await waitElement(selector ?? 'body', {