Web Components & Custom Elements
Web Components let you create reusable, encapsulated HTML elements with their own markup, styles, and behavior. They consist of Custom Elements (define new tags), Shadow DOM (encapsulated styling), and HTML Templates (<template>/<slot>).
40 min•By Priygop Team•Last updated: Feb 2026
Web Components Overview
Web Components are a set of browser APIs that let you create custom, reusable HTML elements. Unlike React or Vue components, Web Components are native browser features — they work everywhere without a framework. The three pillars: Custom Elements (class extends HTMLElement, customElements.define('my-component')), Shadow DOM (encapsulated DOM tree with scoped CSS), and Templates (<template> holds reusable markup, <slot> allows content injection).
Custom Element Code
Example
// Define a custom element
class UserCard extends HTMLElement {
constructor() {
super();
// Attach shadow DOM for style encapsulation
const shadow = this.attachShadow({ mode: 'open' });
const name = this.getAttribute('name') || 'Anonymous';
const role = this.getAttribute('role') || 'Member';
shadow.innerHTML = `
<style>
.card {
border: 2px solid #E44D26;
border-radius: 12px;
padding: 16px;
font-family: Arial, sans-serif;
max-width: 250px;
}
.name { font-weight: bold; font-size: 1.2em; }
.role { color: #666; margin-top: 4px; }
</style>
<div class="card">
<div class="name">${name}</div>
<div class="role">${role}</div>
<slot></slot>
</div>
`;
}
// Lifecycle callbacks
connectedCallback() { console.log('Card added to page'); }
disconnectedCallback() { console.log('Card removed'); }
attributeChangedCallback(name, oldVal, newVal) {
console.log(`${name}: ${oldVal} → ${newVal}`);
}
static get observedAttributes() { return ['name', 'role']; }
}
// Register the custom element
customElements.define('user-card', UserCard);
// Usage in HTML:
// <user-card name="Jane Doe" role="Developer">
// <p>Extra content goes in the slot</p>
// </user-card>