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

```js
// MyComponent.stories.js

import { html } from 'lit';

export default {
  title: 'MyComponent',
  component: 'my-component',
};

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