// INFRA-F43 regression guard — light-DOM CE (shadowRoot:false) + + . // // The dual-framework PopupBox renders as a light-DOM custom element whose modal is // teleported to . Before the fix, Vue 3.5 only populated the host's // `_teleportTargets` when the 's parentComponent was the CE root // (`parentComponent.isCE`). Because the lived in the nested BasePopupBox // child, `_teleportTargets` stayed empty, `_renderSlots()` never found the teleported // , and the modal body rendered as a literal empty `` — dropping all // default-slot content. The fix hoists the into the canonical (CE-root) // component. This spec asserts a sentinel default-slot child actually projects into the // teleported `.popup-box__body`. // // Guard: vitest also globs *.spec.ts — skip there so pre-commit `vitest run` doesn't try // to execute Playwright test() in jsdom. Runs via playwright.render-verification-react.config.ts. if (process.env.VITEST) { const { test } = await import('vitest') test.skip('PopupBox slot-projection regression runs via playwright.render-verification-react.config.ts', () => {}) } else { const { test, expect } = await import('@playwright/test') const POPUP_IDS = [ 'popup-box--theme-dark--visible-true--title-title--canceltext-cancel--confirmtext-confirm--figma-theme-dark--theme-dark', 'popup-box--theme-light--visible-true--title-title--canceltext-cancel--confirmtext-confirm--figma-theme-light--theme-light', ] for (const manifestId of POPUP_IDS) { const theme = manifestId.includes('theme-light') ? 'light' : 'dark' test(`PopupBox projects default-slot content into teleported body (${theme})`, async ({ page }) => { await page.goto(`/?manifestId=${encodeURIComponent(manifestId)}&theme=${theme}`) const body = page.locator('.popup-box__body') await expect(body).toHaveCount(1) const result = await body.evaluate((el) => ({ html: el.innerHTML, sentinelPresent: !!el.querySelector('[data-f43-slot-sentinel]'), sentinelText: el.querySelector('[data-f43-slot-sentinel]')?.textContent ?? null, // A remaining unfilled native is the F43 signature (slot never projected). unfilledSlotCount: el.querySelectorAll('slot').length, })) expect(result.sentinelPresent, `slot content missing — body was: ${result.html}`).toBe(true) expect(result.sentinelText).toBe('f43-projected-body') expect(result.unfilledSlotCount, 'a literal remained (INFRA-F43 regression)').toBe(0) }) } }