Make ID of root component configurable

Is your feature request related to a problem? Please describe. I have an application that always lives within a third party frame that provides some context that the components rely on. This frame is outside my control, and assumes that there will be some root level structure on the page. It also assumes that all content will be rendered within a <main id="ps-main"> tag.

Describe the solution you’d like A way to provide to storybook the id of the element to use as the react root when a preview-body is provided.

Describe alternatives you’ve considered Without a way to configure what the react root that storybook uses is, the only workaround I have is to supply a preview-body with incomplete html, omitting the closing tag of the main so that storybook will render content within it. Not only does this feel gross, it also still inserts additional elements between my app and the surrounding frame, which occasionally causes problems.

Are you able to assist bring the feature to reality? Yes, I can… I haven’t worked on storybook before but I’d be happy to submit a PR if this sounds like something that could get merged.

[shilman]

@schicks Ok, I’d like to see who else has this problem–this is the first time we’ve received this request after tens of thousands of projects using Storybook. Adding a configurable root is easy from a code standpoint, but would be a maintenance nightmare, so I don’t think it’s going to happen.

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!