Chat Component

Prototype + Three Approaches to Component-Based Thinking

Prototype

Pure HTML & CSS

A static mockup using only HTML and CSS to work out the interface design.

  • ✅ No dependencies
  • ✅ Always accessible
  • ✅ Simple to understand
  • ❌ No interactivity
View Demo → Approach 1

DOM Manipulation

Interactive chat using vanilla JavaScript and standard DOM methods.

  • ✅ Full interactivity
  • ✅ Eliza-style bot
  • ✅ Standard JavaScript
  • ❌ No encapsulation
View Demo → Approach 2

Progressive Enhancement

Custom element that enhances existing HTML markup with JavaScript.

  • ✅ Graceful degradation
  • ✅ Semantic base HTML
  • ✅ Web Components API
  • ✅ Global styles
View Demo → Approach 3

Web Component

Fully encapsulated custom element with Shadow DOM and internal styles.

  • ✅ Complete encapsulation
  • ✅ Shadow DOM
  • ✅ Self-contained
  • ✅ Highly reusable
View Demo →