storybook/docs/snippets/web-components/component-story-with-custom-render-function.ts.mdx

```ts
// MyComponent.stories.ts

import { html } from 'lit';

import type { Meta, StoryObj } from '@storybook/web-components';

const meta: Meta = {
  title: 'MyComponent',
  component: 'my-component',
};

export default meta;
type Story = StoryObj;

// This story uses a render function to fully control how the component renders.
export const Example: Story = {
  render: () => html`
    <layout>
      <header>
        <h1>Example</h1>
      </header>
      <article>
        <my-component />
      </article>
    </layout>
  `,
};
```