CEM-aware HTML linting for ESLint. Validates custom-element usage in .html files (and HTML-in-JS template literals) against a project's Custom Elements Manifest (custom-elements.json).

Built on top of @html-eslint/parser — uses its AST, doesn't fork it.

Why

@html-eslint/eslint-plugin ships rules for standard HTML5 only. It has no concept of a custom element's contract, so usages like <my-button labl="Save" variant="ghost"> slip through. This plugin loads your CEM and adds rules that catch unknown elements, unknown attributes, missing required attributes, invalid attribute values, unknown slot names, and deprecated usage.

Install

npm i -D @figma/eslint-plugin-html-cem @html-eslint/parser

Usage

// eslint.config.js
import htmlParser from "@html-eslint/parser";
import htmlCem from "@figma/eslint-plugin-html-cem";

export default [
  {
    files: ["**/*.html"],
    languageOptions: { parser: htmlParser },
    plugins: { "html-cem": htmlCem },
    settings: {
      "html-cem": {
        manifests: [
          "./custom-elements.json",
          "./node_modules/@my-org/components/custom-elements.json",
        ],
      },
    },
    rules: {
      ...htmlCem.configs.recommended.rules,
    },
  },
];

Rules

Rule	Description
`html-cem/no-unknown-element`	Flag dashed tags not registered in any loaded CEM.
`html-cem/no-unknown-attr`	Flag attributes on a known custom element that aren't in its CEM.
`html-cem/require-attrs`	Flag missing attributes marked `@required` in the CEM description.
`html-cem/no-invalid-attr-value`	Validate values against CEM types (boolean / number / string-literal unions).
`html-cem/no-unknown-slot`	Flag `slot="x"` not declared in the parent element's CEM `slots[]`.
`html-cem/no-deprecated`	Warn on elements/attrs marked deprecated in CEM.