# 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](https://custom-elements-manifest.open-wc.org/) (`custom-elements.json`).

Built on top of [`@html-eslint/parser`](https://html-eslint.org/) — 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

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

## Usage

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

## Status

v0 — APIs may change. Feedback welcome.

## License

MIT