10 Custom Elements Manifest files
This chapter covers
- Creating Custom Elements Manifest (CEM) files
- Documenting web components with JSDoc
- Generating web-based documentation and demos
- Generating Markdown-based documentation
- Using the VS Code extension "Web Components Language Server"
A Custom Elements Manifest (CEM) is a JSON file containing API documentation for all the custom elements in a project. It includes tag names, attributes, fields (properties), slots, CSS custom properties, and CSS parts.
The schema for these files is defined in the custom-elements-manifest GitHub repository. The latest version of the schema, 2.1.0, is described in two files: schema.d.ts, which uses TypeScript types, and schema.json, which uses JSON Schema.
CEM files are used by many tools to provide developer documentation. Examples include to-markdown, the API Viewer Element, the VS Code extension "Web Components Language Server", and Storybook.
Creating CEM files manually is tedious and error prone. Instead, use a tool to generate these files from web component source files. A good choice is @custom-elements-manifest/analyzer, referred to as the "analyzer".
10.1 Analyzer
To use the analyzer in a project, install it as a development dependency by running the following command:
npm install -D @custom-elements-manifest/analyzer
Next, add the following scripts in package.json:
"cem": "cem analyze", "cem:watch": "cem analyze --watch",