Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Custom Elements are a web standard that allows you to define your own HTML tags with custom behavior. They're one of the core technologies behind Web Components. Once defined, custom elements work just like built-in HTML elements—you can use them in your markup, style them with CSS, and they have their own lifecycle methods.
// 1. Define the class
class MyElement extends HTMLElement {
connectedCallback() {
this.textContent = 'Hello, Custom Element!';
}
}
// 2. Register the element
customElements.define('my-element', MyElement);
// 3. Use in HTML
// <my-element></my-element>my-button, user-card, app-headerconnectedCallback()Called when element is inserted into the DOM
Common use: Initialize, fetch data, add listeners
disconnectedCallback()Called when element is removed from the DOM
Common use: Cleanup, remove listeners, cancel timers
attributeChangedCallback()Called when an observed attribute changes
Common use: React to attribute updates, re-render
adoptedCallback()Called when element is moved to new document
Common use: Handle document context changes
class MyElement extends HTMLElement {
// Specify which attributes to observe
static get observedAttributes() {
return ['color', 'size'];
}
connectedCallback() {
console.log('Element added to page');
this.render();
}
disconnectedCallback() {
console.log('Element removed from page');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
this.render();
}
}Simple custom element with lifecycle callbacks
<!-- Use the custom element multiple times -->
<greeting-card name="Alice"></greeting-card>
<greeting-card name="Bob"></greeting-card>
<greeting-card></greeting-card>Loading preview...
Custom element that responds to attribute changes
<color-box color="blue" size="large">
This box is blue and large
</color-box>
<div style="margin-top: 1rem;">
<button onclick="changeColor()">Change Color</button>
<button onclick="changeSize()">Change Size</button>
</div>Loading preview...
Understanding the difference between attributes and properties
<user-badge id="myBadge" username="johndoe" role="admin"></user-badge>
<div style="margin-top: 1rem;">
<button onclick="updateViaAttribute()">Update via Attribute</button>
<button onclick="updateViaProperty()">Update via Property</button>
<button onclick="showData()">Show Data</button>
</div>
<pre id="output"></pre>Loading preview...
Enhance existing HTML elements with custom behavior
<!-- Extended button with custom behavior -->
<button is="fancy-button" data-icon="✨">
Click Me!
</button>
<button is="fancy-button" data-icon="🚀">
Launch
</button>
<button is="fancy-button" data-icon="💾">
Save
</button>Loading preview...
Completely new elements that extend HTMLElement
class extends HTMLElementdefine('my-element', MyElement)<my-element></my-element>Extend existing HTML elements with new features
class extends HTMLButtonElementdefine('x', X, {extends: "button"})<button is="x"></button>// Register custom element
customElements.define(
'my-element',
MyElementClass
);
// Check if already defined
if (!customElements.get('my-element')) {
customElements.define('my-element', MyElementClass);
}// Get element class
const MyClass = customElements.get('my-element');
// Wait for definition
customElements.whenDefined('my-element')
.then(() => {
console.log('Element is defined!');
});// Manually upgrade element
const el = document.createElement('my-element');
customElements.upgrade(el);
// Check if upgraded
console.log(el instanceof MyElementClass);// Create via constructor
const el = new MyElementClass();
// Create via createElement
const el2 = document.createElement('my-element');
// Both are equivalent| Browser | Autonomous | Customized Built-in | Notes |
|---|---|---|---|
| Chrome | 54+ | 67+ | Full support |
| Firefox | 63+ | 63+ | Full support |
| Safari | 10.1+ | ❌ | No customized built-in |
| Edge | 79+ | 79+ | Full support |
| Opera | 41+ | 54+ | Full support |
Build your own custom HTML elements with lifecycle callbacks