[Bug]: Inconsistent Render Between Canvas and Docs

[titouandk]

Describe the bug

Docs views injects parasitizing CSS on the page, impacting components rendering.
(The iframe contains code coming from both Storybook and the user's component, creating CSS conflicts.)

Canvas views does not have this problem, as the iframe is not shared between several components.

A good fix would probably be to create one iframe per component on the Docs page.

A video of the problem:

• First, in Canvas view, text color and background color are well applied.
• But then, in Docs view, background color is not applied, because some Storybook classes redefine it.
  • I need to disable some CSS classes for my background color to be applied.

sb-problem.mov

Reproduction link

https://stackblitz.com/edit/github-npfjjs?file=README.md

In case of a package installation error, you may need to:

1. Delete the yarn.lock file, and...
2. Execute the $ yarn install && yarn storybook command to launch Storybook.

Reproduction steps

Same as the video:

1. Go to the above link (stackblitz)
2. Go to the Canvas page of the component
3. Toggle light/dark (it should work)
4. Go to the Docs page
5. Toggle light/dark (only the text will change, but the background color stays light in dark mode)

System

Storybook Environment Info:

System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.0.0 - ~/.nvm/versions/node/v21.0.0/bin/node
npm: 10.2.0 - ~/.nvm/versions/node/v21.0.0/bin/npm <----- active
Browsers:
Chrome: 130.0.6723.117
Safari: 17.6
npmPackages:
@storybook/addon-a11y: ^8.4.1 => 8.4.1
@storybook/addon-essentials: ^8.4.1 => 8.4.1
@storybook/addon-interactions: ^8.4.1 => 8.4.1
@storybook/addon-onboarding: ^8.4.1 => 8.4.1
@storybook/addon-themes: ^8.4.1 => 8.4.1
@storybook/blocks: ^8.4.1 => 8.4.1
@storybook/test: ^8.4.1 => 8.4.1
@storybook/vue3: ^8.4.1 => 8.4.1
@storybook/vue3-vite: ^8.4.1 => 8.4.1
eslint-plugin-storybook: ^0.10.2 => 0.10.2
storybook: ^8.4.1 => 8.4.1

Additional context

No response

[titouandk]

The possible solutions I see for the moment:

• One iframe per story on the Docs pages, to isolate user's components from the surrounding Storybook code.
• A better CSS scoping, to avoid CSS of the Docs interfering with user's components CSS.