Shadow HTML is not displayed in the snapshot.

[DariaKQA]

Hi 👋 I’m experiencing an issue in the application I’m testing. We’re using PSPDFKit to render Shadow DOM HTML and display files in the app. However, when I take a snapshot, I see a broken image in the snapshot instead of the document rendered inside the Shadow DOM.

I’m using Percy @percy/cli 1.31.4 + Playwright 1.56.0 in TypeScript.

Actual view:

Expected view:

I also tested this on the Nutrient demo page to see if I could take a snapshot there, but the document does not appear in the snapshot.
shadow-root is open:

Test example:

import percySnapshot from '@percy/playwright';
import { test, expect } from '@playwright/test';

test('Open Nutrient demo hello page and check content', async ({ page }) => {
    const url = 'https://www.nutrient.io/demo/hello';
    const container = page.locator('.PSPDFKit-Container').first();
    const root = page.locator('.PSPDFKit-Root').first();
    const text = page.getByText('Welcome to ');

    await page.goto(url, { waitUntil: 'domcontentloaded' });

    await expect(container).toBeVisible();
    await expect(root).toBeVisible();
    await expect(text).toBeVisible();

    await percySnapshot(page, 'Nutrient demo hello page');
});

Actual view:

Expected view:

Config:

version: 2
percy:
  useSystemProxy: false
  skipBaseBuild: false
snapshot:
  widths:
    - 375
    - 1280
  minHeight: 1024
  percyCSS: ""
  enableJavaScript: true
  cliEnableJavaScript: true
  disableShadowDOM: false
  forceShadowAsLightDOM: true
  ...

Is it possible to take a snapshot of it? Thank you in advance.