chore:

Author: johnjenkins

docs/documentation-generation/01-overview.md

@@ -9,6 +9,7 @@ slug: /doc-generation
 
 - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md)
 - [`docs-json`: Documentation data formatted in JSON](./docs-json.md)
+- [`docs-custom-elements-manifest`: Custom Elements Manifest (CEM) format](./docs-custom-elements-manifest.md)
 - [`docs-custom`: Custom documentation generation](./docs-custom.md)
 - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md)
 - [`stats`: Stats about the compiled files](./docs-stats.md)

docs/documentation-generation/docs-custom-elements-manifest.md

@@ -75,12 +75,13 @@ Then you'd get the following in the JSON output:
 ]   
 ```
 
-## Slots
+## Slots and CSS Parts
 
 If one of your Stencil components makes use of
 [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) for
-rendering children you can document them by using the `@slot` JSDoc tag in the
-component's comment.
+rendering children or [CSS Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling, 
+you can document them by using the `@slot` and `@part` JSDoc tags in the
+component's comments.
 
 For instance, if you had a `my-button` component with a slot you might document
 it like so:
@@ -90,6 +91,8 @@ import { Component, h } from '@stencil/core';
 
 /**
  * @slot buttonContent - Slot for the content of the button
+ * 
+ * @part button - The button element
  */
 @Component({
   tag: 'my-button',
@@ -98,7 +101,7 @@ import { Component, h } from '@stencil/core';
 })
 export class MyButton {
   render() {
-    return <button><slot name="buttonContent"></slot></button>
+    return <button part="button"><slot name="buttonContent"></slot></button>
   }
 }
 ```
@@ -111,6 +114,12 @@ This would show up in the generated JSON file like so:
     "name": "buttonContent",
     "description": "Slot for the content of the button"
   }
+],
+"cssParts": [
+  {
+    "name": "button",
+    "description": "The button element"
+  }
 ]
 ```
 

docs/documentation-generation/docs-json.md

@@ -153,12 +153,13 @@ latter you'll need to have the
 and configured.
 :::
 
-## Slots
+## Slots and CSS Parts
 
 If one of your Stencil components makes use of
 [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) for
-rendering children you can document them by using the `@slot` JSDoc tag in the
-component's comment.
+rendering children or [CSS Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling, 
+you can document them by using the `@slot` and `@part` JSDoc tags in the
+component's comments.
 
 For instance, if you had a `my-button` component with a slot you might document
 it like so:
@@ -168,6 +169,8 @@ import { Component, h } from '@stencil/core';
 
 /**
  * @slot buttonContent - Slot for the content of the button
+ * 
+ * @part button - The button element
  */
 @Component({
   tag: 'my-button',
@@ -176,7 +179,7 @@ import { Component, h } from '@stencil/core';
 })
 export class MyButton {
   render() {
-    return <button><slot name="buttonContent"></slot></button>
+    return <button part="button"><slot name="buttonContent"></slot></button>
   }
 }
 ```
@@ -187,7 +190,13 @@ This would show up in the generated JSON file like so:
 "slots": [
   {
     "name": "buttonContent",
-    "description": "Slot for the content of the button"
+    "docs": "Slot for the content of the button"
+  }
+],
+"parts": [
+  {
+    "name": "button",
+    "docs": "The button element"
   }
 ]
 ```

versioned_docs/version-v4.42/documentation-generation/01-overview.md

@@ -9,6 +9,7 @@ slug: /doc-generation
 
 - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md)
 - [`docs-json`: Documentation data formatted in JSON](./docs-json.md)
+- [`docs-custom-elements-manifest`: Custom Elements Manifest (CEM) format](./docs-custom-elements-manifest.md)
 - [`docs-custom`: Custom documentation generation](./docs-custom.md)
 - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md)
 - [`stats`: Stats about the compiled files](./docs-stats.md)

versioned_docs/version-v4.42/documentation-generation/docs-custom-elements-manifest.md

@@ -75,12 +75,13 @@ Then you'd get the following in the JSON output:
 ]   
 ```
 
-## Slots
+## Slots and CSS Parts
 
 If one of your Stencil components makes use of
 [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) for
-rendering children you can document them by using the `@slot` JSDoc tag in the
-component's comment.
+rendering children or [CSS Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling, 
+you can document them by using the `@slot` and `@part` JSDoc tags in the
+component's comments.
 
 For instance, if you had a `my-button` component with a slot you might document
 it like so:
@@ -90,6 +91,8 @@ import { Component, h } from '@stencil/core';
 
 /**
  * @slot buttonContent - Slot for the content of the button
+ * 
+ * @part button - The button element
  */
 @Component({
   tag: 'my-button',
@@ -98,7 +101,7 @@ import { Component, h } from '@stencil/core';
 })
 export class MyButton {
   render() {
-    return <button><slot name="buttonContent"></slot></button>
+    return <button part="button"><slot name="buttonContent"></slot></button>
   }
 }
 ```
@@ -111,6 +114,12 @@ This would show up in the generated JSON file like so:
     "name": "buttonContent",
     "description": "Slot for the content of the button"
   }
+],
+"cssParts": [
+  {
+    "name": "button",
+    "description": "The button element"
+  }
 ]
 ```
 

versioned_docs/version-v4.42/documentation-generation/docs-json.md

@@ -153,12 +153,13 @@ latter you'll need to have the
 and configured.
 :::
 
-## Slots
+## Slots and CSS Parts
 
 If one of your Stencil components makes use of
 [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) for
-rendering children you can document them by using the `@slot` JSDoc tag in the
-component's comment.
+rendering children or [CSS Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) for styling, 
+you can document them by using the `@slot` and `@part` JSDoc tags in the
+component's comments.
 
 For instance, if you had a `my-button` component with a slot you might document
 it like so:
@@ -168,6 +169,8 @@ import { Component, h } from '@stencil/core';
 
 /**
  * @slot buttonContent - Slot for the content of the button
+ * 
+ * @part button - The button element
  */
 @Component({
   tag: 'my-button',
@@ -176,7 +179,7 @@ import { Component, h } from '@stencil/core';
 })
 export class MyButton {
   render() {
-    return <button><slot name="buttonContent"></slot></button>
+    return <button part="button"><slot name="buttonContent"></slot></button>
   }
 }
 ```
@@ -187,7 +190,13 @@ This would show up in the generated JSON file like so:
 "slots": [
   {
     "name": "buttonContent",
-    "description": "Slot for the content of the button"
+    "docs": "Slot for the content of the button"
+  }
+],
+"parts": [
+  {
+    "name": "button",
+    "docs": "The button element"
   }
 ]
 ```