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

Next lesson: Shadow DOM skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies