Custom element names
Learn element naming rules and fallback content.
Custom element naming rules
When you invent a new HTML tag, you name it as a custom element. Two rules are firm: the name is lowercase and it contains at least one dash (-). So <user-card> is valid, while <UserCard> or <usercard> are not.
The dash avoids clashes with built-in tags and keeps names readable. Two-word names are common: <blog-post>, <price-tag>, <nav-menu>. This style is called kebab-case.
Fallback for unknown tags
When the browser meets a tag it does not know, it still parses it; the content shows, but no special behavior runs. So the HTML you put inside <user-card> acts as fallback content until the component is defined.
This enables progressive enhancement. The page is meaningful even before JavaScript loads; once the component is ready, slot and shadow DOM take over. Users on old browsers still see a sensible box, never an empty void.
Clashing with built-in tags
A custom element name cannot clash with built-in HTML tags like <p> or <div>. The browser reads those first; your component never runs.
The dash rule prevents this: no built-in tag contains a dash. <my-p> is fine, but <p> cannot be redefined. This keeps code both safe and readable.
Exercise Write a custom element skeleton
Add a <user-card> custom element to body. Inside it put an <h3> (text: Alex) and a <slot>. The slot's fallback content should be No contact info.
Show example solution
<body>
<user-card>
<h3>Alex</h3>
<slot>No contact info</slot>
</user-card>
</body>Test yourself
-
Which is a valid custom element name?
- <UserCard>
- <usercard>
- <user-card>
- <user_card>
Show answer
<user-card> — Correct. user-card is lowercase and has a dash; it follows kebab-case.
-
Write a valid custom element name
<____> <slot></slot> </user-profile>Show answer
<user-profile> <slot></slot> </user-profile> -
Match the naming rules
- dash
- required inside the name
- lowercase
- uppercase not allowed
- kebab-case
- dashed naming style
- user-card
- a valid custom element