Auto-Generated Anchor Positioned TOC

This is an Auto-Generated Anchor Positioned TOC. It parses an article’s heading structure on the fly and constructs a sticky navigation menu. Its primary function is to replace heavy JavaScript scroll-spies (Intersection Observers) with native CSS Anchor Positioning and Scroll Targeting, moving an animated highlight alongside the active content section.

Specs

• Weight: ~5 KB logic (excluding GSAP/Tweakpane for the config panel).
• Performance: Exceptional. Generating the DOM nodes happens once on load. The active state tracking and highlight interpolation are handled entirely by the browser’s CSS engine, avoiding continuous layout recalculations during scroll.
• Theming / Customization: Fully variable-driven (--accent-light, --accent-dark). Respects system light/dark modes via the light-dark() function.
• Responsiveness: Utilizes CSS Grid. The layout alignment (Left vs. Right sidebar) is toggled via [data-align] attributes on the root element.
• Graceful Degradation: [!] Highly experimental. Relies on anchor-name, position-anchor, and scroll-target-group. In Safari and Firefox, the TOC will generate and function as standard anchor links, but the tracking highlight box will not render.

Anatomy

The component merges algorithmic DOM generation with experimental CSS styling.

• HTML (The Skeleton): The core article content sits inside <main>. An empty <table-of-contents> custom element waits for injection.
• CSS (The Skin): Organized by @layer (alignment, transitions, toc, demo). It uses the brand-new corner-shape: squircle for the highlight, falling back to a standard border-radius if unsupported.
• JS (The Nervous System): A recursive buildTOC function scans the DOM for h2-h6 tags, assigns them semantic IDs if missing, and constructs an ordered <ol> list hierarchy, appending it to the custom element.

Logic

The standout technical achievement is “Declarative Scroll Tracking” using native CSS state selectors:

table-of-contents {
  scroll-target-group: auto;

  :not([href='#pre']):target-current {
    anchor-name: --active;
  }

  &::after {
    position-anchor: --active;
    left: anchor(left);
    top: anchor(top);
    transition-property: top, left;
  }
}

Instead of using JS IntersectionObserver to add an .active class to the TOC links, the code uses the experimental :target-current pseudo-class (paired with scroll-target-group). When the browser natively detects a section is in view, the corresponding anchor link in the TOC receives the :target-current state. This state explicitly defines the element as --active. The ::after pseudo-element (the colored highlight box) is bound to the --active anchor, automatically sliding up and down the list without a single line of JavaScript.

Feel

Frictionless and intuitive. Because the highlight tracking is offloaded to the CSS compositor rather than JavaScript, the indicator box moves with zero latency or stutter as you scroll through paragraphs. The use of the experimental squircle shape gives the highlight a softer, highly polished aesthetic reminiscent of native iOS interfaces.