preview-body does not work as expected on the DocsPage when using inline rendering

[drik98]

Describe the bug We currently use the .storybook/preview-body.html file in order to add some custom elements. While on the canvas tab everything works as expected. However, when switching to the DocsPage which uses inline rendering (as opposed to iframes) the elements will be added to the docs-root element just once instead of each "story canvas" on its own.

This way when accessing the custom elements and appending elements to it they appear in the context of the whole DocsPage instead of just the relevant story.

Workaround

Use iframes instead of inline rendering by configuring the docs inside your .storybook/preview.js as described in https://storybook.js.org/docs/react/writing-docs/docs-page#inline-stories-vs-iframe-stories

// .storybook/preview.js

export const parameters = {
  docs: {
    // Opt-out of inline rendering
    inlineStories: false,
  },
};

[MrXwq]

I also encountered such a problem here. When I set inlineStories: false, there is no problem in modifying properties on Canvas, but in Docs, the modification does not take effect. Remove inlineStories: false and restore it, but write Component requires inlineStories: false

Chrome and Safari behave consistently Node：14.17.0

Here is the version I have installed: "@storybook/addon-actions": "6.5.9" "@storybook/addon-essentials": "6.5.9" "@storybook/addon-links": "6.5.9" "@storybook/builder-webpack5": "6.5.9" "@storybook/manager-webpack5": "6.5.9" "@storybook/addon-docs": "6.5.9" "@storybook/addon-storysource": "6.5.9" "@storybook/addon-viewport": "6.5.9" "storybook-dark-mode": "1.1.0" "@storybook/addons": "6.5.9" "@storybook/api": "6.5.9" "@storybook/source-loader": "6.5.9" "@storybook/theming": "6.5.9" "@storybook/vue": "6.5.9" "@storybook/vue3": "6.5.9"

[felipe-silva-devtech]

up