Web Component Adapter — Advanced Protocols

<alap-link>, <alap-lens>, and <alap-lightbox> custom elements. Shadow-DOM isolated; theming via --alap-* CSS variables and ::part() selectors. Personalized around the web-components ecosystem — async queries search HN for web components, static links cover Lit, Open WC, and the relevant specs.

Placement Compass Rose (click a direction to set placement on every element on this page)

Click any direction; every <alap-link>, <alap-lens>, and <alap-lightbox> on the page gets that placement attribute.

Quick confirm — Static WC links (no async, opens instantly at the compass direction).

1. Progressive Async Menu

Deterministic `:slow:` mock

"Loading…" row appears centered over the trigger, shadow DOM isolated from the host page.

Slow menu — 5 items in 2s

Fast menu — 8 items in 500ms

Real data: HN search for web components

2. Mixed Static + Dynamic

static mock (async) HN (async)

Static WC refs + 3 slow items

Static WC refs + 4 HN stories

3. Error and Empty Placeholders

Forced error after 800ms

Empty result after 800ms

Static + error + slow

4. Lens — Metadata Card

<alap-lens> is the lens-as-web-component variant. Reads the same expression grammar; renders into a metadata panel.

WC ecosystem lens (static + slow)

WC lightbox (shadow-DOM diagram + slow)

6. In-Flight Dedup

Trigger A — slow 4 items Trigger B — same token