Merge pull request #17531 from oligafner/add-a-good-old-web-component-snippet

add list-story-unchecked snippet

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>
+`;
+```

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>
+`;
+```

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',
   ]}
 />