Web Components

`webc/valid-name`

A custom element name is lowercase, starts with a letter, contains a hyphen and is not a reserved name, or define() throws.

seriousstaticfe-web-components

Why

customElements.define('MyButton', …) or define('button', …) throws a SyntaxError when the module loads: the element is never defined, every instance stays an unknown inline element, and any code after the call in that module does not run.

Fix

Use a lowercase name with a hyphen, ideally with a project prefix: acme-button, x-date-picker. Avoid the reserved names annotation-xml, color-profile, font-face, font-face-src, font-face-uri, font-face-format, font-face-name and missing-glyph.

Examples

// bad
customElements.define('DatePicker', DatePicker)
// good
customElements.define('acme-date-picker', DatePicker)

Sources

Facts

Id: webc/valid-name
Severity: serious
Check: static checked in the source by audit
Applies to: jsx html vue svelte astro
Taught by the skill: fe-web-components Web components and Lit
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain webc/valid-name