diff --git a/docs/resources/contributing.md b/docs/resources/contributing.md index 8063fc6ea..3cdeac72f 100644 --- a/docs/resources/contributing.md +++ b/docs/resources/contributing.md @@ -188,16 +188,25 @@ This convention avoids the problem of browsers lowercasing attributes, causing s ### CSS Custom Properties -To expose custom properties as part of a component's API, scope them to the `:host` block and use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope. +To expose custom properties as part of a component's API, scope them to the `:host` block. -```css -/** - * @prop --color: The component's text color. - * @prop --background-color: The component's background color. - */ +```scss :host { - --color: white; - --background-color: tomato; + --color: var(--sl-color-primary-500); + --background-color: var(--sl-color-gray-100); +} +``` + +Then use the following syntax for comments so they appear in the generated docs. Do not use the `--sl-` prefix, as that is reserved for design tokens that live in the global scope. + +```js +/** + * @customProperty --color: The component's text color. + * @customProperty --background-color: The component's background color. + */ +@customElement('sl-example') +export default class SlExample { + // ... } ``` diff --git a/scripts/create-component.cjs b/scripts/create-component.cjs index 2d824ffae..9fc6cf5c4 100644 --- a/scripts/create-component.cjs +++ b/scripts/create-component.cjs @@ -47,8 +47,11 @@ import styles from 'sass:./${tagNameWithoutPrefix}.scss'; * @slot - The default slot. * @slot example - A named slot called example. * - * @part base - The component's base wrapper. - * @part example - Another part called example. + * @part example - An example part. + * + * @customProperty example - An example custom property + * + * @animation example - An example animation. */ @customElement('${tagName}') export default class ${className} extends LitElement { @@ -75,9 +78,6 @@ const stylesFile = `src/components/${tagNameWithoutPrefix}/${tagNameWithoutPrefi const stylesSource = ` @use '../../styles/component'; -/** - * @prop --custom-property-here: Description here - */ :host { display: block; }