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 →