You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Storybook provides the preview-head.html and preview-body.html templates to customise those tags in the rendered previews, but I would like to be able to override the <html> tag with data attributes for a React application. Almost like if there was a preview-root.html template.
I haven't been able to find a way to configure any attributes on root html tag that happen consistently before the preview is rendered. I've noticed that lang attribute is set on it, maybe inherited from the Storybook manager. There doesn't seem to be any mention in the docs of how to work with the document root for setting lang or other attributes.
There are plugins like storybook-addon-root-attribute but it seems to add the attributes after the preview has rendered, and then queries the element and sets attrs.
(my question only relates to the <html> tag in the preview iframe, not the html root of Storybook manager, the wrapper application)
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
Storybook provides the
preview-head.htmlandpreview-body.htmltemplates to customise those tags in the rendered previews, but I would like to be able to override the<html>tag with data attributes for a React application. Almost like if there was apreview-root.htmltemplate.I haven't been able to find a way to configure any attributes on root html tag that happen consistently before the preview is rendered. I've noticed that
langattribute is set on it, maybe inherited from the Storybook manager. There doesn't seem to be any mention in the docs of how to work with the document root for setting lang or other attributes.There are plugins like
storybook-addon-root-attributebut it seems to add the attributes after the preview has rendered, and then queries the element and sets attrs.(my question only relates to the
<html>tag in the preview iframe, not the html root of Storybook manager, the wrapper application)Additional information
Storybook v8
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions