@chromatic-com/cypress doesn't render web component shadow DOM styles

[myamericanairlines]

Describe the bug Web Component shadow DOM styles are not rendering in chromatic when using the Chromatic for Cypress integration.

Running cypress standalone (cypress open --e2e --browser chrome) does display the web components correctly. Creating a storybook story of the web component and uploading to chromatic shows the shadow DOM correctly.

Running the Chromatic for Cypress steps (See To Reproduce below) does not display the shadow DOM elements in chromatic. All the non web component DOM elements display their html and css correctly.

To Reproduce Steps to reproduce the behavior:

1. ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 cypress run --e2e
2. npx chromatic --cypress -t=[token]
3. Click on the View your Storybook at link

Expected behavior Would expect the web component shadow DOM styles to be rendered in chromatic

Screenshots Screenshot showing shadow DOM styles correctly (not in chromatic)

Screenshot showing shadow DOM not rendering in chromatic

Additional Info

cypress.config.ts

e2e.ts

package.json

info.cy.ts

.storybook/main.ts

[skitterm]

Hi @myamericanairlines, we'll take a look at this and see if archiving shadow DOM is something we can feasibly get to soon. We'll keep you posted!