Web Components

🌐 HTML5 🟢 Chapter 33 of 37 📂 Phase 12: Advanced HTML5 📅 2026 Edition

📌 Covered in this chapter: Web Components Standard · Custom Elements (customElements.define) · Shadow DOM Encapsulation · Templates & Slots · Form-Associated Custom Elements · Web Components vs React

Welcome to Phase 12 (Chapter 33): Web Components! Build native encapsulated UI components using Custom Elements, Shadow DOM, and HTML Templates.

1Custom Web Component Class Example

HTML + JS — Custom Web Component ▶ Run in HTML Editor

<user-card name="Balaji" role="Developer"></user-card>

<script>
  class UserCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>
          .box { padding:15px; border:1px solid #f97316; border-radius:6px; background:#141922; color:#fff; }
          h4 { color:#f97316; margin:0 0 5px 0; }
        </style>
        <div class="box">
          <h4>${this.getAttribute('name')}</h4>
          <p>${this.getAttribute('role')}</p>
        </div>
      `;
    }
  }
  customElements.define('user-card', UserCard);
</script>

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026