eslint-plugin-html-cem

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. |

Status

v0 — APIs may change. Feedback welcome.

License

MIT