### Install custom-elements-manifest CLI

Source: https://github.com/webcomponents/custom-elements-manifest/blob/main/README.md

Installs the custom-elements-manifest package as a development dependency using npm.

```sh
npm i -D custom-elements-manifest
```

--------------------------------

### Example Custom Element JavaScript Source

Source: https://github.com/webcomponents/custom-elements-manifest/blob/main/README.md

A JavaScript example of a custom element class 'MyElement' that extends HTMLElement, defines observed attributes, properties, methods, and dispatches events.

```javascript
/**
 * This is the description of the class
 */
export class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['disabled'];
  }

  set disabled(val) {
    this.__disabled = val;
  }
  get disabled() {
    return this.__disabled;
  }

  fire() {
    this.dispatchEvent(new Event('disabled-changed'));
  }
}

customElements.define('my-element', MyElement);
```

--------------------------------

### CEM Package Interface Example

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

An example of the top-level `Package` interface in a Custom Elements Manifest. It includes schema version, a README reference, and an array of modules within the package.

```json
{
  "schemaVersion": "2.1.0",
  "readme": "README.md",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/components/index.js",
      "declarations": [],
      "exports": []
    }
  ],
  "deprecated": false
}
```

--------------------------------

### CEM JavaScriptModule Interface Example

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

An example illustrating the `JavaScriptModule` interface within a Custom Elements Manifest. It describes a JavaScript module file, its path, summary, and any declarations or exports it contains.

```json
{
  "kind": "javascript-module",
  "path": "src/components/my-button.js",
  "summary": "A customizable button component",
  "description": "This module exports a button component with various styling options.",
  "declarations": [
    {
      "kind": "class",
      "customElement": true,
      "name": "MyButton",
      "tagName": "my-button"
    }
  ],
  "exports": [
    {
      "kind": "js",
      "name": "MyButton",
      "declaration": { "name": "MyButton" }
    },
    {
      "kind": "custom-element-definition",
      "name": "my-button",
      "declaration": { "name": "MyButton" }
    }
  ],
  "deprecated": false
}
```

--------------------------------

### Complete Custom Elements Manifest Example (JSON)

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

A comprehensive example of a Custom Elements Manifest file. It includes multiple modules, custom element declarations with properties, attributes, events, slots, CSS parts, CSS properties, and demo links.

```json
{
  "schemaVersion": "2.1.0",
  "readme": "README.md",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/my-button.js",
      "summary": "Button component module",
      "declarations": [
        {
          "kind": "class",
          "customElement": true,
          "name": "MyButton",
          "tagName": "my-button",
          "description": "A customizable button component",
          "superclass": {
            "name": "LitElement",
            "package": "lit",
            "module": "lit-element.js"
          },
          "members": [
            {
              "kind": "field",
              "name": "variant",
              "type": { "text": "'primary' | 'secondary'" },
              "default": "'primary'",
              "privacy": "public"
            },
            {
              "kind": "field",
              "name": "disabled",
              "type": { "text": "boolean" },
              "default": "false",
              "privacy": "public"
            },
            {
              "kind": "method",
              "name": "click",
              "privacy": "public",
              "return": { "type": { "text": "void" } }
            }
          ],
          "attributes": [
            {
              "name": "variant",
              "type": { "text": "'primary' | 'secondary'" },
              "default": "'primary'",
              "fieldName": "variant"
            },
            {
              "name": "disabled",
              "type": { "text": "boolean" },
              "default": "false",
              "fieldName": "disabled"
            }
          ],
          "events": [
            {
              "name": "my-click",
              "type": { "text": "CustomEvent<void>" },
              "description": "Fired when the button is clicked"
            }
          ],
          "slots": [
            {
              "name": "",
              "description": "Button label content"
            },
            {
              "name": "prefix",
              "description": "Content before the label"
            }
          ],
          "cssParts": [
            {
              "name": "base",
              "description": "The button element"
            }
          ],
          "cssProperties": [
            {
              "name": "--my-button-color",
              "syntax": "<color>",
              "default": "white"
            },
            {
              "name": "--my-button-background",
              "syntax": "<color>",
              "default": "blue"
            }
          ],
          "demos": [
            {
              "url": "https://example.com/demo",
              "description": "Interactive demo"
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyButton",
          "declaration": { "name": "MyButton" }
        },
        {
          "kind": "custom-element-definition",
          "name": "my-button",
          "declaration": { "name": "MyButton" }
        }
      ]
    }
  ]
}
```

--------------------------------

### Example Custom Elements Manifest JSON

Source: https://github.com/webcomponents/custom-elements-manifest/blob/main/README.md

An example of a custom-elements.json file generated from the 'MyElement' JavaScript source. It details the schema version, module path, class declarations (including customElement, tagName, members, events, attributes, superclass), and exports.

```json
{
  "schemaVersion": "2.1.0",
  "readme": "README.md",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "my-project/my-element.js",
      "declarations": [
        {
          "kind": "class",
          "customElement": true,
          "name": "MyElement",
          "tagName": "my-element",
          "description": "This is the description of the class",
          "members": [
            {
              "kind": "field",
              "name": "disabled"
            },
            {
              "kind": "method",
              "name": "fire"
            }
          ],
          "events": [
            {
              "name": "disabled-changed",
              "type": {
                "text": "Event"
              }
            }
          ],
          "attributes": [
            {
              "name": "disabled"
            }
          ],
          "superclass": {
            "name": "HTMLElement"
          }
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyElement",
          "declaration": {
            "name": "MyElement"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "my-element",
          "declaration": {
            "name": "MyElement"
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### Install Custom Elements Manifest Package

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Installs the custom-elements-manifest package as a development dependency using npm. This package provides the JSON Schema and TypeScript types for creating and validating CEM files.

```bash
npm install -D custom-elements-manifest
```

--------------------------------

### CEM CustomElementDeclaration Interface Example

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

An example of the `CustomElementDeclaration` interface in a Custom Elements Manifest. This details a custom element class, including its name, tag name, description, superclass, members, attributes, events, slots, CSS parts, and CSS properties.

```json
{
  "kind": "class",
  "customElement": true,
  "name": "MyElement",
  "tagName": "my-element",
  "description": "A sample custom element component",
  "superclass": {
    "name": "HTMLElement",
    "package": "global:"
  },
  "members": [
    {
      "kind": "field",
      "name": "disabled",
      "type": { "text": "boolean" },
      "default": "false",
      "description": "Whether the element is disabled"
    },
    {
      "kind": "method",
      "name": "fire",
      "description": "Dispatches a custom event",
      "parameters": [
        {
          "name": "eventName",
          "type": { "text": "string" }
        }
      ],
      "return": { "type": { "text": "void" } }
    }
  ],
  "attributes": [
    {
      "name": "disabled",
      "type": { "text": "boolean" },
      "default": "false",
      "fieldName": "disabled",
      "description": "Reflects the disabled property"
    }
  ],
  "events": [
    {
      "name": "disabled-changed",
      "type": { "text": "CustomEvent<boolean>" },
      "description": "Fired when the disabled state changes"
    }
  ],
  "slots": [
    {
      "name": "",
      "description": "Default slot for element content"
    },
    {
      "name": "icon",
      "description": "Slot for an icon element"
    }
  ],
  "cssParts": [
    {
      "name": "button",
      "description": "The internal button element"
    }
  ],
  "cssProperties": [
    {
      "name": "--my-element-color",
      "syntax": "<color>",
      "default": "#333",
      "description": "The primary text color"
    }
  ]
}
```

--------------------------------

### Describe Class Fields and Methods

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Details properties (fields) and functions (methods) of a class, including their visibility, static nature, and parameters. This is crucial for understanding class interfaces.

```json
{
  "kind": "field",
  "name": "value",
  "type": { "text": "string" },
  "default": "''",
  "privacy": "public",
  "static": false,
  "readonly": false,
  "description": "The current input value"
}
```

```json
{
  "kind": "method",
  "name": "validate",
  "privacy": "public",
  "static": false,
  "parameters": [
    {
      "name": "value",
      "type": { "text": "string" },
      "optional": false
    }
  ],
  "return": {
    "type": { "text": "boolean" },
    "description": "True if the value is valid"
  },
  "description": "Validates the input value"
}
```

--------------------------------

### Reference Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes references to exports from modules, used for superclasses, mixins, and type references.

```APIDOC
## Reference Interface

The `Reference` interface describes references to exports from modules, used for superclasses, mixins, and type references.

### Properties
- **name** (string) - The name of the referenced export.
- **package** (string) - The package name where the export is located. Use 'global:' for global types.
- **module** (string) - The module path where the export is located.
```

--------------------------------

### Define Module References for Exports

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes references to exports from modules, commonly used for superclasses, mixins, or type references. This allows for clear dependency tracking.

```json
{
  "name": "LitElement",
  "package": "lit",
  "module": "lit-element.js"
}
```

```json
{
  "name": "HTMLElement",
  "package": "global:"
}
```

```json
{
  "name": "MyBaseClass",
  "module": "./base-class.js"
}
```

--------------------------------

### Configure package.json for custom element manifests

Source: https://github.com/webcomponents/custom-elements-manifest/blob/main/README.md

Demonstrates how to add a 'customElements' field to a package.json file to specify the location of the custom element manifest, allowing tools to discover it without downloading package tarballs.

```json
{
  "name": "example-package",
  "customElements": "custom-elements.json"
}
```

--------------------------------

### CssPart Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes CSS shadow parts that can be styled from outside the component using `::part()`.

```APIDOC
## CssPart Interface

The `CssPart` interface describes CSS shadow parts that can be styled from outside the component using `::part()`.

### Properties
- **name** (string) - The name of the CSS part.
- **description** (string) - A description of the element targeted by this part.
```

--------------------------------

### Import CEM Schema and Types (TypeScript)

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Demonstrates how to import the JSON Schema and TypeScript types for the custom-elements-manifest package. This allows for type-safe creation and validation of CEM files within a TypeScript project.

```typescript
// Require the JSON Schema for validation
const customElementManifestSchema = require('custom-elements-manifest');

// Import TypeScript types for type-safe manifest creation
import * as schema from 'custom-elements-manifest/schema';
import type { Package, Module, CustomElementDeclaration } from 'custom-elements-manifest/schema';
```

--------------------------------

### Describe Custom Element Attributes with Types and Defaults

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Specifies HTML attributes that a custom element can accept, including their data types, default values, and descriptions. This aids in understanding element configuration.

```json
{
  "name": "variant",
  "type": { "text": "'primary' | 'secondary' | 'danger'" },
  "default": "'primary'",
  "description": "The visual variant of the button",
  "fieldName": "variant",
  "deprecated": false
}
```

--------------------------------

### ClassField and ClassMethod Interfaces

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes properties and methods of a class, including visibility and inheritance information.

```APIDOC
## ClassField and ClassMethod Interfaces

The `ClassField` and `ClassMethod` interfaces describe properties and methods of a class, including visibility and inheritance information.

### ClassField Properties
- **kind** (string) - The type of declaration, expected to be 'field'.
- **name** (string) - The name of the field.
- **type** (Type) - The type of the field.
- **default** (any) - The default value of the field.
- **privacy** (string) - The visibility of the field ('public', 'private', 'protected').
- **static** (boolean) - Whether the field is static.
- **readonly** (boolean) - Whether the field is read-only.
- **description** (string) - A description of the field.

### ClassMethod Properties
- **kind** (string) - The type of declaration, expected to be 'method'.
- **name** (string) - The name of the method.
- **privacy** (string) - The visibility of the method ('public', 'private', 'protected').
- **static** (boolean) - Whether the method is static.
- **parameters** (Array<Parameter>) - An array of parameters the method accepts.
- **return** (Return) - Information about the method's return value.
- **description** (string) - A description of the method.
```

--------------------------------

### Describe Mixin Declaration with Parameters and Members

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Defines a mixin function that extends a base class, including its parameters, members, and other mixins it incorporates. This is useful for describing reusable functionality.

```json
{
  "kind": "mixin",
  "name": "DisabledMixin",
  "description": "A mixin that adds disabled functionality to any element",
  "parameters": [
    {
      "name": "Base",
      "type": { "text": "Constructor<HTMLElement>" },
      "description": "The base class to extend"
    }
  ],
  "members": [
    {
      "kind": "field",
      "name": "disabled",
      "type": { "text": "boolean" },
      "default": "false"
    }
  ],
  "mixins": [
    {
      "name": "FocusMixin",
      "module": "./focus-mixin.js"
    }
  ]
}
```

--------------------------------

### Slot Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes shadow DOM content slots that a custom element accepts.

```APIDOC
## Slot Interface

The `Slot` interface describes shadow DOM content slots that a custom element accepts.

### Properties
- **name** (string) - The name of the slot. An empty string indicates the default slot.
- **description** (string) - A description of the content expected in the slot.
- **deprecated** (boolean | string) - Indicates if the slot is deprecated and provides a reason if it's a string.
```

--------------------------------

### CssCustomState Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes CSS custom states that can be matched using the `:state()` pseudo-class.

```APIDOC
## CssCustomState Interface

The `CssCustomState` interface describes CSS custom states that can be matched using the `:state()` pseudo-class.

### Properties
- **name** (string) - The name of the custom state.
- **description** (string) - A description of the condition under which this state is applied.
```

--------------------------------

### Attribute Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes HTML attributes that a custom element understands, including type information and default values.

```APIDOC
## Attribute Interface

The `Attribute` interface describes HTML attributes that a custom element understands, including type information and default values.

### Properties
- **name** (string) - The name of the attribute.
- **type** (Type) - The type of the attribute value.
- **default** (any) - The default value of the attribute.
- **description** (string) - A description of the attribute's purpose.
- **fieldName** (string) - The corresponding field name in the class.
- **deprecated** (boolean | string) - Indicates if the attribute is deprecated and provides a reason if it's a string.
```

--------------------------------

### Event Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes custom events fired by a custom element, including the event type information.

```APIDOC
## Event Interface

The `Event` interface describes custom events fired by a custom element, including the event type information.

### Properties
- **name** (string) - The name of the event.
- **type** (Type) - The type of the event, often a `CustomEvent` with a detail type.
- **description** (string) - A description of when and why the event is fired.
```

--------------------------------

### Describe Shadow DOM Slots for Content Projection

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Defines the slots available within a custom element's shadow DOM for content projection. This allows users to inject their own DOM structure.

```json
{
  "name": "",
  "description": "Default slot for main content"
}
```

```json
{
  "name": "header",
  "description": "Slot for header content"
}
```

```json
{
  "name": "footer",
  "description": "Slot for footer content",
  "deprecated": "Use the 'actions' slot instead"
}
```

--------------------------------

### MixinDeclaration Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes a class mixin function that extends a base class with additional functionality, including parameters and members.

```APIDOC
## MixinDeclaration Interface

The `MixinDeclaration` interface describes a class mixin function that extends a base class with additional functionality.

### Properties
- **kind** (string) - The type of declaration, expected to be 'mixin'.
- **name** (string) - The name of the mixin.
- **description** (string) - A description of the mixin's functionality.
- **parameters** (Array<Parameter>) - An array of parameters the mixin function accepts.
- **members** (Array<ClassMember>) - An array of members (fields, methods) introduced by the mixin.
- **mixins** (Array<Reference>) - An array of other mixins applied by this mixin.
```

--------------------------------

### Package.json customElements Field

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Specifies the location of the custom elements manifest file within a package.json.

```APIDOC
## Package.json customElements Field

Packages should include a `customElements` field in `package.json` pointing to their manifest file to allow tools to discover it without downloading the tarball.

### Example `package.json`
```json
{
  "name": "my-components",
  "version": "1.0.0",
  "customElements": "custom-elements.json",
  "main": "index.js",
  "module": "index.js",
  "types": "index.d.ts"
}
```

### Properties
- **customElements** (string) - The path to the `custom-elements.json` manifest file relative to the `package.json`.
```

--------------------------------

### Describe CSS Shadow Parts for Styling

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Defines CSS shadow parts that can be targeted for styling from outside the component using the `::part()` pseudo-element. This provides controlled styling hooks.

```json
{
  "name": "container",
  "description": "The outer container element"
}
```

```json
{
  "name": "label",
  "description": "The label text element"
}
```

--------------------------------

### Define CSS Custom States for Pseudo-class Styling

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Specifies custom states for a custom element that can be matched using the `:state()` pseudo-class. This allows for advanced styling based on component state.

```json
{
  "name": "checked",
  "description": "Applied when the element is checked"
}
```

```json
{
  "name": "loading",
  "description": "Applied while the element is loading data"
}
```

--------------------------------

### CssCustomProperty Interface

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Describes CSS custom properties (CSS variables) that a custom element uses for styling.

```APIDOC
## CssCustomProperty Interface

The `CssCustomProperty` interface describes CSS custom properties (CSS variables) that a custom element uses for styling.

### Properties
- **name** (string) - The name of the CSS custom property (e.g., `--my-color`).
- **syntax** (string) - The expected syntax or type of the CSS custom property value.
- **default** (string) - The default value of the CSS custom property.
- **description** (string) - A description of the CSS custom property's purpose.
```

--------------------------------

### Require custom-elements-manifest JSON Schema

Source: https://github.com/webcomponents/custom-elements-manifest/blob/main/README.md

Loads the custom-elements-manifest JSON Schema using the require function, typically in a CommonJS environment.

```javascript
const customElementManifestSchema = require('custom-elements-manifest');
```

--------------------------------

### Define CSS Custom Properties for Theming

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Specifies CSS custom properties (variables) used by a custom element for styling. This enables easy theming and customization from outside the component.

```json
{
  "name": "--button-background",
  "syntax": "<color>",
  "default": "blue",
  "description": "Background color of the button"
}
```

```json
{
  "name": "--button-padding",
  "syntax": "<length>",
  "default": "8px 16px",
  "description": "Padding inside the button"
}
```

--------------------------------

### Import custom-elements-manifest TypeScript types

Source: https://github.com/webcomponents/custom-elements-manifest/blob/main/README.md

Imports the TypeScript types for the custom-elements-manifest schema, allowing for type-safe usage in TypeScript projects.

```typescript
import * as schema from 'custom-elements-manifest/schema';
```

--------------------------------

### Define Custom Element Events with Type Information

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Details custom events dispatched by a custom element, including the event name and its associated data types. This helps in handling component interactions.

```json
{
  "name": "value-changed",
  "type": {
    "text": "CustomEvent<{value: string, oldValue: string}>",
    "references": [
      {
        "name": "CustomEvent",
        "package": "global:",
        "start": 0,
        "end": 11
      }
    ]
  },
  "description": "Fired when the input value changes"
}
```

--------------------------------

### Validate Custom Elements Manifest with JSON Schema (TypeScript)

Source: https://context7.com/webcomponents/custom-elements-manifest/llms.txt

Validates a custom elements manifest file against its official JSON schema using the 'jsonschema' package. It reads the schema and manifest files, performs validation, and logs success or error messages.

```typescript
import { Validator } from 'jsonschema';
import * as fs from 'fs/promises';

// Load the schema and manifest
const schema = JSON.parse(await fs.readFile('node_modules/custom-elements-manifest/schema.json', 'utf-8'));
const manifest = JSON.parse(await fs.readFile('./custom-elements.json', 'utf-8'));

// Validate the manifest
const validator = new Validator();
const result = validator.validate(manifest, schema);

if (result.errors.length === 0) {
  console.log('Manifest is valid!');
} else {
  console.error('Validation errors:', result.errors);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.