09. Native Anchors, Popovers & Iterator Pipelines

Tether floating overlays without external positioning libraries and process data streams lazily without intermediate array allocations.

<!-- Native Anchored Popover without Popper or Floating UI -->
<button popovertarget="user-menu" style="anchor-name: --avatar-anchor">
  Open Profile
</button>

<div 
  id="user-menu" 
  popover="auto"
  style="position-anchor: --avatar-anchor; top: anchor(bottom); left: anchor(left);"
  class="rounded-xl border p-4 shadow-xl backdrop:bg-transparent"
>
  <p class="font-bold">Active User Session</p>
  <button class="mt-2 text-xs text-rose-500">Sign Out</button>
</div>

Key Mechanics

• CSS Anchor Positioning: Tether floating menus in pure CSS without JavaScript bounding calculations.
• Native Popovers: Top-layer promotion and light-dismiss without click listeners.
• Iterator Helpers: Lazy pipeline transformations with zero intermediate array allocations.