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

```js
// MyComponent.stories.js

import { html } from 'lit-html';

import './Layout';
import './MyComponent';

export default {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'MyComponent',
};

// 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>
  `,
};
```