Storybook: `preview-body.html` not working as expected (?)

[amypellegrini]

Hi, thanks for taking the time to look into this.

Describe the bug

The rendered content is not being appended in the preview-body.html file as the documentation suggests:

https://storybook.js.org/docs/configurations/add-custom-body/

To Reproduce

Add a preview-body.html file inside the .storybook config folder as suggested in the docs, containing a single custom <div id="custom-root"></div> div wrapper.

Expected behavior

I would expect this element to be the root of the rendered content, unless I'm missing something. Instead, the usual #root div container is used.

Screenshots

As shown in the screenshot, an extra div is added to the content, but this div is empty and is not serving the purpose of being the root for the rendered content.

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.7.0 - ~/.nvm/versions/node/v12.7.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.10.0 - ~/.nvm/versions/node/v12.7.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.163
    Firefox: 74.0.1
    Safari: 13.1
  npmPackages:
    @storybook/react: ^5.0.6 => 5.2.8

[IuliiaBondarieva]

Have the same problem :/

[IuliiaBondarieva]

Needed it to add attribute on DOM Element.
Found some workaround for now. Updated loadStories function in .storybook/config.js:

```const req = require.context('../src', true, /.stories.js$/)

function loadStories() {
document.body.onload = function () {
document.body.setAttribute('theme', 'myTheme')
}

req.keys().forEach(filename => req(filename))
}

[shilman]

@amypellegrini AFAIK the custom body simply injects more HTML into the body of the page. It doesn't rewrite the page or modify the storybook root.

[IuliiaBondarieva]

@shilman in my case it does nothing at all. That means that I can't find any custom-root element in DOM.
I have "@storybook/react": "5.1.9" package.

[amypellegrini]

@shilman Thanks for your answer. I was trying to add a custom root to render the content and I found the link I refer to in the issue (https://storybook.js.org/docs/configurations/add-custom-body/), it sounds like there is some confusion on my part on how to achieve this, and I lack clear instructions on how to do it.

Do you think that adding a few more details in the docs about how to render the examples in a custom root, or making it somehow more obvious would help other people like me who are not familiar with how this works? Would this be unreasonable to ask?

Thanks again!

[fvilers]

I came to this topic while looking for how to inject the rendered stories inside a custom div tag instead of the traditional <div id="root">. Are there more instructions somewhere on how to do this?

My app design is based on CSS rules using #root which I should not use inside storybook so I created a preview-body.html file with another div ID and expected storybook to render to it.

[shilman]

AFAIK there is no way to render stories in a custom root cc @ndelangen

[fvilers]

@shilman Thanks for the answer.

[ndelangen]

Indeed there isn't the #root is hard-coded, and non-configurable.

Perhaps we should rename the #root to something a bit more storybook specific?

[shilman]

@ndelangen #sb-root as a breaking change for 6.0? cc @tmeasday

[ndelangen]

I could change that @shilman

[shilman]

Probably a good idea. @tmeasday any objections from a chromatic / third party standpoint?

[ndelangen]

Do we have a list of other integration parties who we should notify of this change upfront?

[shilman]

yeah, i can handle that

[ndelangen]

I'll open a PR for the change then

[tmeasday]

Yeah I guess this is OK, although it will be annoying for integrators I guess.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[johnmcdowall]

It's extremely surprising that using the documented custom root file just injects that into the DOM and continues to use an unaltered div#root.

I expected that the custom root would be used instead, so that I can put the custom classes I need on that root.