Defining Elements with customElements.define
Register a custom element class with the browser.
What Are Custom Elements?
Custom elements let you invent your own HTML tags backed by a JavaScript class. Once defined, <my-card> behaves like any built-in element: it can be written in HTML, queried, styled, scripted, and used inside frameworks unchanged.
The Hyphen Requirement
Every custom element name must include at least one hyphen — user-avatar, app-button, my-card. The hyphen distinguishes custom elements from current and future built-in HTML tags and is enforced by the spec.
All lessons in this course
- Defining Elements with customElements.define
- The connectedCallback and disconnectedCallback
- Observed Attributes and attributeChangedCallback
- Extending Built-in Elements