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.

poważnastatycznefe-web-components

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

Fakty

Identyfikator: webc/valid-name
Waga: poważna
Sprawdzanie: statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików: jsx html vue svelte astro
Uczy jej skill: fe-web-components Web components and Lit
Od wersji: 0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

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