Merge pull request #10638 from storybookjs/tech/root-change

Future - Rename Storybook DOM root IDs

MIGRATION.md

@@ -3,6 +3,7 @@
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [Alpha release notes](#alpha-release-notes)
   - [Breaking changes](#breaking-changes)
+    - [Change of root html IDs](#change-of-root-html-ids)
     - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
     - [Modern browser support](#modern-browser-support)
     - [No more configuration for manager](#no-more-configuration-for-manager)
@@ -235,6 +236,10 @@ In the meantime, these migration notes are the best available documentation on t
 
 ### Breaking changes
 
+#### Change of root html IDs
+
+The root ID unto which storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code.
+
 #### No more default export from `@storybook/addons`
 
 The default export from `@storybook/addons` has been removed. Please use the named exports instead:
@@ -2152,7 +2157,7 @@ To configure a11y now, you have to specify configuration using story parameters,
 ```js
 export const parameters = {
   a11y: {
-    element: '#root',
+    element: "#storybook-root",
     config: {},
     options: {},
     manual: true,

code/addons/a11y/README.md

@@ -175,7 +175,7 @@ export default {
   parameters: {
     a11y: {
       // optional selector which element to inspect
-      element: '#root',
+      element: '#storybook-root',
       // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
       config: {},
       // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)

code/addons/a11y/src/a11yRunner.ts

@@ -36,7 +36,7 @@ const run = async (storyId: string) => {
       channel.emit(EVENTS.RUNNING);
       const axe = (await import('axe-core')).default;
 
-      const { element = '#root', config, options = {} } = input;
+      const { element = '#storybook-root', config, options = {} } = input;
       const htmlElement = document.querySelector(element);
       axe.reset();
       if (config) {

code/addons/a11y/src/components/Report/HighlightToggle.test.tsx

@@ -28,7 +28,9 @@ const defaultProviderValue = {
 
 describe('<HighlightToggle />', () => {
   it('should render', () => {
-    const { container } = render(<HighlightToggle elementsToHighlight={[nodeResult('#root')]} />);
+    const { container } = render(
+      <HighlightToggle elementsToHighlight={[nodeResult('#storybook-root')]} />
+    );
     expect(container.firstChild).toBeTruthy();
   });
 
@@ -37,10 +39,10 @@ describe('<HighlightToggle />', () => {
       <A11yContext.Provider
         value={{
           ...defaultProviderValue,
-          highlighted: ['#root'],
+          highlighted: ['#storybook-root'],
         }}
       >
-        <HighlightToggle elementsToHighlight={[nodeResult('#root')]} />
+        <HighlightToggle elementsToHighlight={[nodeResult('#storybook-root')]} />
       </A11yContext.Provider>
     );
     const checkbox = getByRole('checkbox') as HTMLInputElement;
@@ -52,10 +54,12 @@ describe('<HighlightToggle />', () => {
       <A11yContext.Provider
         value={{
           ...defaultProviderValue,
-          highlighted: ['#root'],
+          highlighted: ['#storybook-root'],
         }}
       >
-        <HighlightToggle elementsToHighlight={[nodeResult('#root'), nodeResult('#root1')]} />
+        <HighlightToggle
+          elementsToHighlight={[nodeResult('#storybook-root'), nodeResult('#storybook-root1')]}
+        />
       </A11yContext.Provider>
     );
     const checkbox = getByRole('checkbox') as HTMLInputElement;
@@ -64,10 +68,10 @@ describe('<HighlightToggle />', () => {
 
   describe('toggleHighlight', () => {
     it.each`
-      highlighted  | elementsToHighlight    | expected
-      ${[]}        | ${['#root']}           | ${true}
-      ${['#root']} | ${['#root']}           | ${false}
-      ${['#root']} | ${['#root', '#root1']} | ${true}
+      highlighted            | elementsToHighlight                        | expected
+      ${[]}                  | ${['#storybook-root']}                     | ${true}
+      ${['#storybook-root']} | ${['#storybook-root']}                     | ${false}
+      ${['#storybook-root']} | ${['#storybook-root', '#storybook-root1']} | ${true}
     `(
       'should be triggered with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight',
       ({ highlighted, elementsToHighlight, expected }) => {

code/addons/actions/src/preview/withActions.ts

@@ -43,7 +43,7 @@ const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[])
 
 const applyEventHandlers = deprecate(
   (actionsFn: any, ...handles: any[]) => {
-    const root = document && document.getElementById('root');
+    const root = document && document.getElementById('storybook-root');
     useEffect(() => {
       if (root != null) {
         const handlers = createHandlers(actionsFn, ...handles);

code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts

@@ -6,7 +6,7 @@ const riotForStorybook = jest.requireActual('@storybook/riot');
 
 function bootstrapADocumentAndReturnANode() {
   const rootElement = document.createElement('div');
-  rootElement.id = 'root';
+  rootElement.id = 'storybook-root';
   document.body = document.createElement('body');
   document.body.appendChild(rootElement);
   return rootElement;

code/addons/storyshots/storyshots-puppeteer/README.md

@@ -333,7 +333,7 @@ To create a screenshot of just a single element (with its children), rather than
 import initStoryshots from '@storybook/addon-storyshots';
 import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
 
-const beforeScreenshot = (page) => page.$('#root > *');
+const beforeScreenshot = (page) => page.$('#storybook-root > *');
 
 initStoryshots({
   suite: 'Image storyshots',

code/addons/storyshots/storyshots-puppeteer/src/axeTest.ts

@@ -10,7 +10,7 @@ export const axeTest = (customConfig: Partial<AxeConfig> = {}) => {
     ...extendedConfig,
     async testBody(page, testOptions) {
       const {
-        element = '#root',
+        element = '#storybook-root',
         exclude,
         disabledRules,
         options,

code/cypress/helper.ts

@@ -20,7 +20,7 @@ export const visit = (route = '') => {
       expect(element).not.null;
 
       if (element !== null) {
-        expect(element.querySelector('#root > *, #docs-root > *')).not.null;
+        expect(element.querySelector('#storybook-root > *, #storybook-docs > *')).not.null;
       }
     });
   });
@@ -41,11 +41,11 @@ export const getStorybookPreview = () => {
         expect(element).not.null;
 
         if (element !== null) {
-          expect(element.querySelector('#root > *')).not.null;
+          expect(element.querySelector('#storybook-root > *')).not.null;
         }
       })
       .then(() => {
-        return cy.wrap(element).get('#root');
+        return cy.wrap(element).get('#storybook-root');
       });
   });
 };

code/cypress/support/commands.js

@@ -46,7 +46,7 @@ Cypress.Commands.add('visitStorybook', () => {
     .its('0.contentDocument.body', { log: false })
     .should('not.be.empty')
     .then((body) => cy.wrap(body, { log: false }))
-    .find('#docs-root', { log: false })
+    .find('#storybook-docs', { log: false })
     .should('not.be.empty');
 });
 
@@ -57,7 +57,7 @@ Cypress.Commands.add('getStoryElement', {}, () => {
     .its('0.contentDocument.body', { log: false })
     .should('not.be.empty')
     .then((body) => cy.wrap(body, { log: false }))
-    .find('#root', { log: false })
+    .find('#storybook-root', { log: false })
     .should('not.be.empty')
     .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
 });
@@ -69,7 +69,7 @@ Cypress.Commands.add('getDocsElement', {}, () => {
     .its('0.contentDocument.body', { log: false })
     .should('not.be.empty')
     .then((body) => cy.wrap(body, { log: false }))
-    .find('#docs-root', { log: false })
+    .find('#storybook-docs', { log: false })
     .should('not.be.empty')
     .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
 });

code/e2e-tests/example.spec.ts

@@ -7,7 +7,7 @@ test('Basic story test', async ({ page }) => {
   await page.goto(storybookUrl);
 
   const preview = page.frameLocator('#storybook-preview-iframe');
-  const root = preview.locator('#root:visible, #docs-root:visible');
+  const root = preview.locator('#storybook-root:visible, #storybook-docs:visible');
 
   // Specific check for introduction story
   await expect(root).toContainText('Welcome');

code/e2e-tests/util.ts

@@ -38,7 +38,7 @@ export class SbPage {
 
   previewRoot() {
     const preview = this.previewIframe();
-    return preview.locator('#root:visible, #docs-root:visible');
+    return preview.locator('#storybook-root:visible, #storybook-docs:visible');
   }
 
   panelContent() {

code/examples/standalone-preview/storybook.html

@@ -7,8 +7,8 @@
     <title></title>
   </head>
   <body>
-    <div id="root"></div>
-    <div id="docs-root"></div>
+    <div id="storybook-root"></div>
+    <div id="storybook-docs"></div>
     <script type="module" src="./storybook.ts"></script>
     <div class="sb-errordisplay sb-wrapper">
       <div id="error-message" class="sb-heading"></div>

code/frameworks/angular/src/client/angular-beta/RendererFactory.ts

@@ -44,17 +44,17 @@ export class RendererFactory {
 }
 
 export const getRenderType = (targetDOMNode: HTMLElement): RenderType => {
-  return targetDOMNode.id === 'root' ? 'canvas' : 'docs';
+  return targetDOMNode.id === 'storybook-root' ? 'canvas' : 'docs';
 };
 
 export function clearRootHTMLElement(renderType: RenderType) {
   switch (renderType) {
     case 'canvas':
-      global.document.getElementById('docs-root').innerHTML = '';
+      global.document.getElementById('storybook-docs').innerHTML = '';
       break;
 
     case 'docs':
-      global.document.getElementById('root').innerHTML = '';
+      global.document.getElementById('storybook-root').innerHTML = '';
       break;
     default:
       break;

code/frameworks/angular/src/client/angular/helpers.ts

@@ -168,7 +168,7 @@ const initModule = (storyFn: PartialStoryFn<AngularFramework>) => {
   );
 };
 
-const staticRoot = document.getElementById('root');
+const staticRoot = document.getElementById('storybook-root');
 const insertDynamicRoot = () => {
   const app = document.createElement('storybook-dynamic-app-root');
   staticRoot.innerHTML = '';

code/frameworks/ember/src/client/preview/render.ts

@@ -7,7 +7,7 @@ import { OptionsArgs, EmberFramework } from './types';
 
 const { window: globalWindow, document } = global;
 
-const rootEl = document.getElementById('root');
+const rootEl = document.getElementById('storybook-root');
 
 const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
 const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create({

code/lib/builder-manager/templates/template.ejs

@@ -11,8 +11,7 @@
     <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
 
     <style>
-      #root[hidden],
-      #docs-root[hidden] {
+      #storybook-root[hidden]{
         display: none !important;
       }
     </style>
@@ -23,7 +22,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <div id="docs-root"></div>
 
     <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
     <script>

code/lib/core-common/templates/base-preview-head.html

@@ -2,7 +2,7 @@
 
 <style>
   /* While we aren't showing the main block yet, but still preparing, we want everything the user
-     has rendered, which may or may not be in #root, to be display none */
+     has rendered, which may or may not be in #storybook-root, to be display none */
   .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
     display: none;
   }
@@ -26,7 +26,7 @@
     min-height: 100vh;
   }
 
-  .sb-show-main.sb-main-centered #root {
+  .sb-show-main.sb-main-centered #storybook-root {
     box-sizing: border-box;
     margin: auto;
     padding: 1rem;

code/lib/core-common/templates/preview.ejs

@@ -16,17 +16,17 @@
     <% }); %>
 
     <style>
-      #root[hidden],
-      #docs-root[hidden] {
+      #storybook-root[hidden],
+      #storybook-docs[hidden] {
         display: none !important;
       }
     </style>
   </head>
   <body>
     <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
 
-    <div id="root"></div>
-    <div id="docs-root"></div>
+    <div id="storybook-root"></div>
+    <div id="storybook-docs"></div>
 
     <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
     <script>

code/lib/preview-web/src/WebView.ts

@@ -75,7 +75,7 @@ export class WebView {
   }
 
   storyRoot(): HTMLElement {
-    return document.getElementById('root');
+    return document.getElementById('storybook-root');
   }
 
   prepareForDocs() {
@@ -86,7 +86,7 @@ export class WebView {
   }
 
   docsRoot(): HTMLElement {
-    return document.getElementById('docs-root');
+    return document.getElementById('storybook-docs');
   }
 
   applyLayout(layout: Layout = 'padded') {

code/lib/ui/src/components/preview/FramesRenderer.tsx

@@ -57,12 +57,12 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
   const active = getActive(refId);
 
   const styles = useMemo<CSSObject>(() => {
-    // add #root to make the selector high enough in specificity
+    // add #storybook-root to make the selector high enough in specificity
     return {
-      '#root [data-is-storybook="false"]': {
+      '#storybook-root [data-is-storybook="false"]': {
         display: 'none',
       },
-      '#root [data-is-storybook="true"]': {
+      '#storybook-root [data-is-storybook="true"]': {
         display: 'block',
       },
     };

code/lib/ui/src/components/sidebar/Menu.stories.tsx

@@ -36,7 +36,7 @@ export const Real = () => <SidebarMenu menu={fakemenu} isHighlighted />;
 export const Toolbar = () => <ToolbarMenu menu={fakemenu} />;
 
 const DoubleThemeRenderingHack = styled.div({
-  '#root > [data-side="left"] > &': {
+  '#storybook-root > [data-side="left"] > &': {
     textAlign: 'right',
   },
 });

code/renderers/svelte/src/render.ts

@@ -25,7 +25,7 @@ export function renderToDOM(
 ) {
   cleanUpPreviousStory();
 
-  const target = domElement || document.getElementById('root');
+  const target = domElement || document.getElementById('storybook-root');
 
   target.innerHTML = '';
 

code/renderers/vue/src/render.ts

@@ -42,7 +42,7 @@ const getRoot = (domElement: Element): Instance => {
       // @ts-ignore
       map.set(domElement, instance);
       const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
-      return h('div', { attrs: { id: 'root' } }, children);
+      return h('div', { attrs: { id: 'storybook-root' } }, children);
     },
   });
 

docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx

@@ -19,7 +19,7 @@ import { MyComponent } from './MyComponent.component';
   name="ExampleStory"
   parameters={{
     a11y: {
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx

@@ -17,7 +17,7 @@ export default {
 export const ExampleStory: Story = {
   parameters: {
     a11y: {
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {

docs/snippets/common/storybook-addon-a11y-component-config.js.mdx

@@ -13,7 +13,7 @@ export default {
   parameters: {
     a11y: {
       // Optional selector to inspect
-      element: '#root',
+      element: '#storybook-root',
       config: {
         rules: [
           {