Contact Management
A complete contact management system built as a <domma-contacts> web component. Drop it anywhere — storage, search, groups, favourites, and a rich editor overlay are all encapsulated inside the Shadow DOM.
Download Component Download Template

Both files are required. Drop in <domma-contacts></domma-contacts> anywhere.

Features Demonstrated

DommaComponent / Shadow DOM

  • Registered via Domma.component()
  • Scoped CSS — zero leakage to host page
  • Theme CSS variables flow in through the shadow boundary
  • Portable: works with any Domma page

Storage & Data

  • S.get() / S.set() — auto JSON serialisation
  • 14-field contact model (name, DOB, social, groups…)
  • Contacts and groups persist across page refreshes
  • D().diff() — live age from date of birth

Search & Filtering

  • _.debounce() — 250 ms debounced search
  • _.filter() — by query, group, and favourites
  • Group dropdown auto-updates from managed groups
  • Favourites toggle with star animation

UI Components

  • E.toast() — success, warning notifications
  • E.confirm() — delete confirmations
  • E.prompt() — group name input
  • I.scan(this.root) — icons inside shadow root

Card Grid & Avatars

  • Contact cards with colour-coded initial avatars
  • Deterministic colour from contact ID hash
  • _.render() Mustache template per card
  • _.escape() + DOMPurify — two-layer XSS defence

Dates & Groups

  • D().fromNow() — relative created timestamps
  • D().format() — DOB display
  • Groups CRUD: add / rename / delete via prompts
  • Rename propagates to all contacts automatically