[Bug]: `id` property on HTML element interpreted as Story id.

Describe the bug

I have some .mdx files describing the HTML for a component. The first element has an id, and it is mistakenly interpreted to be referring to a story id.

To Reproduce

https://stackblitz.com/edit/github-qwj9m6?file=src/stories/test.mdx

Create MDX file
Import Canvas, Meta from addon-docs
In Canvas, enter some HTML markup
Add an id to the first HTML element

There is no error produced initially, but when trying to load the page it will spin forever, failing to load.

Example:

import { Canvas, Meta } from '@storybook/addon-docs';

<Meta title="Test Component" />

# Test Component

<Canvas>
  <div id="testComponent"></div>
</Canvas>

System

Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.1.0-alpha.15 => 7.1.0-alpha.17 
    @storybook/addon-interactions: ^7.1.0-alpha.15 => 7.1.0-alpha.17 
    @storybook/addon-links: ^7.1.0-alpha.15 => 7.1.0-alpha.17 
    @storybook/blocks: ^7.1.0-alpha.15 => 7.1.0-alpha.17 
    @storybook/react: ^7.1.0-alpha.15 => 7.1.0-alpha.17 
    @storybook/react-vite: ^7.1.0-alpha.15 => 7.1.0-alpha.17 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

I tried to create a Stackblitz with HTML + Vite, but it failed on installing dependencies. Should I file that as a separate issue?

I was having the same issue, with components that require a HTML id attribute to function. But now that passing children to Canvas is deprecated, I don't think this will be changed.

I solved it by adding the TestComponent story to an adjacent file and importing it. Eg:

// test.stories.tsx
import type { Meta } from '@storybook/react';

import { TestComponent } from '.';

const meta: Meta<typeof TestComponent> = {
  component: TestComponent,
};

type Story = StoryObj<typeof TestComponent>;

export const Basic: Story = {
  // can add id here with no problem
  render: () => <TestComponent id="testComponent" />,
};

export default meta;

// test.mdx
import { Canvas, Meta } from '@storybook/addon-docs';
import * as stories from './test.stories.tsx'

<Meta title="Test Component" />

# Test Component

<Canvas of={stories.Basic} />

storybookjs / storybook