diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
index 127bc8704a4a..7f1b194d16b6 100644
--- a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
+++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
@@ -84,7 +84,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "boolean",
     },
   },
   "backSide": Object {
@@ -126,7 +126,7 @@ Object {
     "name": "header",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "\\"Your Message\\"",
       },
@@ -152,7 +152,7 @@ Object {
     "name": "rows",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "[]",
       },
diff --git a/code/renderers/web-components/src/docs/custom-elements.ts b/code/renderers/web-components/src/docs/custom-elements.ts
index 6a4dbdeee26e..eaa9f3436bd1 100644
--- a/code/renderers/web-components/src/docs/custom-elements.ts
+++ b/code/renderers/web-components/src/docs/custom-elements.ts
@@ -40,8 +40,19 @@ interface Declaration {
 }
 
 function mapItem(item: TagItem, category: string): InputType {
-  const type =
-    category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
+  let type;
+  switch (category) {
+    case 'attributes':
+    case 'properties':
+      type = { name: item.type?.text || item.type };
+      break;
+    case 'slots':
+      type = { name: 'string' };
+      break;
+    default:
+      type = { name: 'void' };
+      break;
+  }
 
   return {
     name: item.name,
@@ -139,9 +150,9 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   const metaData = getMetaData(tagName, customElements);
   return (
     metaData && {
-      ...mapData(metaData.attributes ?? [], 'attributes'),
       ...mapData(metaData.members ?? [], 'properties'),
       ...mapData(metaData.properties ?? [], 'properties'),
+      ...mapData(metaData.attributes ?? [], 'attributes'),
       ...mapData(metaData.events ?? [], 'events'),
       ...mapData(metaData.slots ?? [], 'slots'),
       ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
diff --git a/code/renderers/web-components/template/stories/custom-elements.json b/code/renderers/web-components/template/stories/custom-elements.json
index 7389e1bab99b..6bdc06ce7a23 100644
--- a/code/renderers/web-components/template/stories/custom-elements.json
+++ b/code/renderers/web-components/template/stories/custom-elements.json
@@ -51,8 +51,8 @@
           ],
           "slots": [
             {
-              "description": "This is an unnamed slot (the default slot)",
-              "name": ""
+              "name": "prefix",
+              "description": "Label prefix"
             }
           ],
           "members": [
diff --git a/code/renderers/web-components/template/stories/demo-wc-card.stories.js b/code/renderers/web-components/template/stories/demo-wc-card.stories.js
index 0e5dd11f3e68..193a961c6bce 100644
--- a/code/renderers/web-components/template/stories/demo-wc-card.stories.js
+++ b/code/renderers/web-components/template/stories/demo-wc-card.stories.js
@@ -3,14 +3,22 @@ import './demo-wc-card';
 
 export default {
   component: 'demo-wc-card',
+  render: ({ backSide, header, rows, prefix }) =>
+    html`
+      <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
+        ><span slot="prefix">${prefix}</span>A simple card</demo-wc-card
+      >
+    `,
 };
 
-const Template = ({ backSide, header, rows }) =>
-  html`
-    <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
-      >A simple card</demo-wc-card
-    >
-  `;
+export const Front = {
+  args: { backSide: false, header: undefined, rows: [] },
+};
+
+export const Back = {
+  args: { backSide: true, header: undefined, rows: [] },
+};
 
-export const Front = Template.bind({});
-Front.args = { backSide: false, header: undefined, rows: [] };
+export const Prefix = {
+  args: { backSide: false, prefix: 'prefix:', header: 'my header', rows: [] },
+};
diff --git a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
index 89e29d06fc92..4c8cee3a7c6c 100644
--- a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
+++ b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
@@ -69,7 +69,7 @@ export class DemoWcCard extends LitElement {
         </div>
       </div>
       <div id="back" part="back">
-        <div class="header">${this.header}</div>
+        <div class="header"><slot name="prefix"></slot> ${this.header}</div>
 
         <div class="content">
           ${this.rows.length === 0