<link rel="stylesheet" href="/_merged_assets/_static/search/noscript.css">
Custom Elements Manifest Custom Elements Manifest Analyzer Blog Playground Toggle darkmode


CLI Options

analyzeAnalyze your components
--configstringPath to custom config location--config "../custom-elements-manifest.config.js"
--globsstring[]Globs to analyze--globs "foo.js"
--excludestring[]Globs to exclude--exclude "foo.js"
--outdirstringDirectory to output the Manifest to--outdir dist
--dependenciesbooleanInclude third party custom elements manifests--dependencies
--packagejsonbooleanOutput CEM path to package.json, defaults to true--packagejson
--watchbooleanEnables watch mode, generates a new manifest on file change--watch
--devbooleanEnables extra logging for debugging--dev
--quietbooleanHides all logging--quiet
--litelementbooleanEnable special handling for LitElement syntax--litelement
--fastbooleanEnable special handling for FASTElement syntax--fast
--stencilbooleanEnable special handling for Stencil syntax--stencil
--catalystbooleanEnable special handling for Catalyst syntax--catalyst
--catalyst-major-2booleanEnable special handling for Catalyst syntax ^2.0.0--catalyst-major-2

Config File

You can specify a custom custom-elements-manifest.config.mjs configuration file that allows the following properties:


import { myAwesomePlugin } from 'awesome-plugin';

export default {
  /** Globs to analyze */
  globs: ['src/**/*.js'],
  /** Globs to exclude */
  exclude: ['src/foo.js'],
  /** Directory to output CEM to */
  outdir: 'dist',
  /** Run in dev mode, provides extra logging */
  dev: true,
  /** Run in watch mode, runs on file changes */
  watch: true,
  /** Include third party custom elements manifests */
  dependencies: true,
  /** Output CEM path to `package.json`, defaults to true */
  packagejson: false,
  /** Enable special handling for litelement */
  litelement: true,
  /** Enable special handling for catalyst */
  catalyst: false,
  /** Enable special handling for fast */
  fast: false,
  /** Enable special handling for stencil */
  stencil: false,
  /** Provide custom plugins */
  plugins: [

  /** Overrides default module creation: */
  overrideModuleCreation: ({ts, globs}) => {
    const program = ts.createProgram(globs, defaultCompilerOptions);
    const typeChecker = program.getTypeChecker();

    return program.getSourceFiles().filter(sf => globs.find(glob => sf.fileName.includes(glob)));

Config types:

interface userConfigOptions {
  globs: string[],
  exclude: string[],
  outdir: string,
  dev: boolean,
  watch: boolean,
  dependencies: boolean,
  packagejson: boolean,

  litelement: boolean,
  catalyst: boolean,
  fast: boolean,
  stencil: boolean,
  plugins: Array<() => Plugin>,
  overrideModuleCreation: ({ts: TypeScript, globs: string[]}) => SourceFile[]

Analyzing dependencies

By default, the analyzer doesn't analyze any code inside node_modules/. This has several reasons; you dont want all of lodash to accidentally get analyzed and output in your manifest, but also, we don't actually know which dependencies your project uses until we're analyzing the code, by which time glob collection and compilation has already happened.

If you want to include metadata about third party packages in your custom-elements.json you can enable the --dependencies flag. This will try to find your dependencies' custom-elements.json files, by either looking at the customElements field in your package.json, or the ./customElements field in the packages' exports map if available. If a custom-elements.json is found, the output will be included in your custom-elements.json.