Vanilla Web Components: Accordion, Float Bar & Fly-Out

Web Components sind ein Browser-Standard, mit dem sich eigene, wiederverwendbare HTML-Elemente bauen lassen – ganz ohne Framework. Einmal geschrieben, laufen sie überall: in einer statischen HTML-Seite genauso wie in einem React-, Vue- oder Angular-Projekt, weil sie schlicht native Browser-Funktionen nutzen.

Ich habe drei solcher Komponenten als npm-Pakete veröffentlicht: ein Accordion, eine Float Bar und ein Fly-Out-Panel. Alle drei sind ohne Abhängigkeiten, barrierefrei nutzbar und per npm installierbar.

Accordion

Ein zugängliches Akkordeon mit sanften Auf- und Zuklapp-Animationen. Über <accordion-item>-Elemente lassen sich einzelne Panels definieren, die per Klick, Tastatur (Enter/Space) oder programmatisch (show(), close(), toggle()) gesteuert werden können.

Besonders praktisch: In einer <accordion-group> lassen sich mehrere Items zusammenfassen, sodass immer nur eines gleichzeitig geöffnet ist – ideal für FAQ-Bereiche. Auch verschachtelte Akkordeons sind möglich. Animation-Dauer und Easing lassen sich frei über Attribute konfigurieren, und dank ARIA-Attributen sowie automatischer Tastatursteuerung ist die Komponente von Haus aus barrierefrei.

Float Bar

Eine schwebende Leiste, die beim Herunterscrollen automatisch verschwindet und beim Hochscrollen wieder einblendet – ein klassisches Muster für Navigationsleisten, die dem Nutzer nicht im Weg stehen, aber trotzdem schnell erreichbar bleiben.

Die Komponente erkennt automatisch, ob sie im Fenster oder innerhalb eines scrollbaren Containers sitzt, und animiert butterweich mit requestAnimationFrame. Über das offset-Attribut (oder offset-element, das die Höhe eines anderen Elements übernimmt) lässt sich Platz für fixierte Header einplanen. Sobald die Leiste ihre „sticky“-Position erreicht, erhält sie automatisch die Klasse is-sticky, über die sich z. B. Schatten oder ein Blur-Hintergrund stylen lassen.

Fly-Out

Ein Slide-in-Panel, das von jeder der vier Bildschirmkanten (oben, unten, links, rechts) einfahren kann – etwa für Sidebars, mobile Menüs oder Bottom-Sheets. Gesteuert wird es über ein eigenes <fly-out-toggle>-Element, das per name-Attribut mit dem passenden <fly-out>-Panel verknüpft ist.

Die Komponente bringt alles mit, was ein modales Panel barrierefrei macht: einen Fokus-Trap, ESC-zum-Schließen, automatischen Fokus auf das erste interaktive Element beim Öffnen sowie Fokus-Rückgabe beim Schließen. Optional lassen sich Hintergrund-Overlay, Klick-außerhalb-zum-Schließen und Scroll-Sperre des Body einzeln deaktivieren. Auch hier ist die Steuerung sowohl deklarativ als auch programmatisch (open(), close(), toggle()) möglich, inklusive eigener Events wie fly-out-opened und fly-out-state-changed.

Alle drei Komponenten sind in TypeScript geschrieben, kommen ohne externe Abhängigkeiten aus und basieren auf den Web-Standards Custom Elements v1 und Shadow DOM v1 – sie laufen also in jedem modernen Browser und lassen sich in jedes Projekt einbinden, unabhängig vom verwendeten Framework.