Defining Custom Elements
Register elements with the customElements API.
What Are Custom Elements?
Custom elements let you define your own HTML tags backed by JavaScript classes. Instead of gluing together div soup, you create a reusable, self-contained component like <user-card>.
- They are part of the Web Components standard.
- They work natively in browsers, no framework required.
- A custom element name must contain a hyphen (e.g.
my-button).
The customElements Registry
The browser exposes a global registry at window.customElements. You register a new tag by calling customElements.define(name, constructor).
Once defined, every matching tag in the document is upgraded into an instance of your class.
// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);
// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.All lessons in this course
- Defining Custom Elements
- Lifecycle Callbacks
- Shadow DOM and Encapsulation
- Templates and Slots