diff --git a/docs/snippets/web-components/list-story-unchecked.js.mdx b/docs/snippets/web-components/list-story-unchecked.js.mdx
new file mode 100644
index 00000000000..79946a54733
--- /dev/null
+++ b/docs/snippets/web-components/list-story-unchecked.js.mdx
@@ -0,0 +1,24 @@
+```js
+// my-list.stories.js|jsx
+
+import { html } from 'lit';
+
+import './my-list';
+
+//👇 Instead of importing my-list-item, we import the stories
+import { Unchecked } from './my-list-item.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/web-components/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'my-list',
+};
+
+export const OneItem = () => html`
+  <List>
+    ${Unchecked({ ...Unchecked.args })}
+  </List>
+`;
+```
diff --git a/docs/snippets/web-components/list-story-unchecked.ts.mdx b/docs/snippets/web-components/list-story-unchecked.ts.mdx
new file mode 100644
index 00000000000..e491afd8c26
--- /dev/null
+++ b/docs/snippets/web-components/list-story-unchecked.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// my-list.stories.ts|tsx
+
+import { html } from 'lit';
+import { Story } from '../../IStory';
+import { IList } from './my-list.custom';
+
+import './my-list';
+
+//👇 Instead of importing my-list-item, we import the stories
+import { Unchecked } from './my-list-item.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/web-components/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'my-list',
+};
+
+export const OneItem: Story<IList> = () => html`
+  <List>
+    ${Unchecked({ ...Unchecked.args })}
+  </List>
+`;
+```
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 88c1c9a5b9c..b51f87a5b30 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -42,6 +42,8 @@ The simplest change we can make to the above is to reuse the stories of the `Lis
     'vue/list-story-unchecked.2.js.mdx',
     'vue/list-story-unchecked.3.js.mdx',
     'angular/list-story-unchecked.ts.mdx',
+    'web-components/list-story-unchecked.js.mdx',
+    'web-components/list-story-unchecked.ts.mdx',
   ]}
 />