Wie OpenUI Web Components formt

Mar 10, 2026 · 4 min read

Wenn Sie jemals ein benutzerdefiniertes Dropdown, Tooltip oder Popover von Grund auf neu erstellt haben, kennen Sie den Aufwand: Dutzende Zeilen JavaScript, manuelle ARIA-Attribute, Tastaturnavigationslogik und Browser-Inkonsistenzen, die gepatcht werden müssen. OpenUI existiert, um diese Arbeit auf Plattformebene zu eliminieren.

OpenUI ist eine W3C Community Group, keine Komponentenbibliothek oder Framework. Ihr Ziel ist es, gängige UI-Muster im Web zu identifizieren, zu untersuchen, wie bestehende Design-Systeme diese implementieren, und direkt mit Browser-Herstellern zusammenzuarbeiten, um interoperable, barrierefreie Lösungen nativ zu standardisieren.

Wichtigste Erkenntnisse

OpenUI ist eine W3C Community Group, die gängige UI-Muster als native Browser-Features standardisiert und damit den Bedarf an benutzerdefinierten JavaScript-Implementierungen reduziert.
Die Popover API, Invoker Commands API und das anpassbare <select>-Element werden bereits in Browsern ausgeliefert – als direkte Ergebnisse der Arbeit von OpenUI.
Vorschläge wie Interest Invokers, Focusgroup und Combobox-Verbesserungen zeigen, wohin sich die Plattform als Nächstes entwickelt.
Bevor Sie zu einer Drittanbieter-Komponente greifen, prüfen Sie, was der Browser mittlerweile nativ unterstützt – diese Liste wächst jedes Jahr.

Was OpenUI-Webstandards tatsächlich bewirken

Die Grundidee ist einfach: Wenn jedes Team dasselbe Select-Menü, Popover oder dieselbe Combobox mit benutzerdefiniertem JavaScript neu erstellt, läuft auf Plattformebene etwas schief. OpenUI dokumentiert diese Muster, schlägt Spezifikationen vor und drängt auf native Browser-Implementierungen, damit Entwickler aufhören, das Rad immer wieder neu zu erfinden.

Die Gruppe konzentriert sich auf Controls, die entweder vollständig in HTML fehlen oder in einer Form existieren, die zu eingeschränkt ist, um gestylt oder erweitert zu werden – Dinge wie <select>, Popovers, Menüs, Comboboxes und Tooltips.

Praktische Features, die bereits ausgeliefert werden

Die Popover API ist eines der direktesten Ergebnisse des Einflusses von OpenUI. Sie gibt Entwicklern ein natives popover-Attribut, das das Ein-/Ausblenden, Top-Layer-Rendering und Light-Dismiss standardmäßig übernimmt – für die Grundlagen ist kein JavaScript erforderlich.

<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>Menu content here</div>

Dies ersetzt Muster, die zuvor benutzerdefiniertes Focus-Trapping, z-index-Stacking und Click-Outside-Erkennung erforderten.

Die Invoker Commands API für deklarative UI-Steuerung

Die Invoker Commands API erweitert dies noch weiter und hat kürzlich Baseline-Unterstützung in allen wichtigen Browsern erreicht. Mit den Attributen command und commandfor können Buttons deklarativ Aktionen auf Zielelementen auslösen – Popovers umschalten, Dialoge öffnen oder Medien abspielen – ohne Event-Listener.

<button commandfor="my-dialog" command="show-modal">Open Dialog</button>
<dialog id="my-dialog">Dialog content</dialog>

Dies verlagert die UI-Steuerungslogik von JavaScript nach HTML, wodurch Interaktionen leichter lesbar, wartbar und standardmäßig barrierefrei bleiben.

Anpassbares Select-Element mit CSS

Das <select>-Element war notorisch schwer zu stylen. Die Arbeit von OpenUI am anpassbaren Select-Element ändert das. Mit appearance: base-select legen Browser die interne Struktur des Select-Elements für CSS-Targeting offen. Das Pseudo-Element ::picker(select) ermöglicht es Ihnen, den Dropdown-Container direkt zu stylen.

select {
  appearance: base-select;
}

select::picker(select) {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px;
}

Dieses Feature ist noch experimentell und wird derzeit am besten als Progressive Enhancement eingesetzt, aber es stellt einen bedeutenden Wandel dar: gestylte Selects ohne benutzerdefinierte Komponente oder JavaScript-Wrapper.

Was noch in Arbeit ist

Nicht alles, was OpenUI erforscht, wurde bereits ausgeliefert. Mehrere Vorschläge sind aktiv, aber noch nicht standardisiert:

Interest Invokers — Auslösen von Popovers bei Hover oder Focus ohne JavaScript
Focusgroup — deklarative Tastaturnavigation über eine Gruppe von Elementen hinweg, ersetzt manuelle Roving-tabindex-Logik
Combobox-Verbesserungen — ein natives, stylebares Combobox-Muster, um die gängige Kombination aus <input> + benutzerdefinierter Listbox zu ersetzen

Diese sind es wert, verfolgt zu werden. Sie signalisieren, wohin sich die Plattform entwickelt, auch wenn die Browser-Unterstützung heute noch begrenzt ist.

Fazit

OpenUI-Webstandards reduzieren stetig die Fälle, in denen Sie eine benutzerdefinierte Komponente oder eine JavaScript-lastige Implementierung benötigen. Die Popover API, Invoker Commands API und das anpassbare Select-Element mit CSS sind bereits verwendbar. Die noch in Arbeit befindlichen Vorschläge – Interest Invokers, Focusgroup, Combobox – zeigen die Richtung.

Bevor Sie zu einer Drittanbieter-Komponente greifen oder benutzerdefinierte Interaktionslogik schreiben, prüfen Sie, was die Plattform mittlerweile nativ unterstützt. OpenUI macht diese Liste jedes Jahr länger.

Häufig gestellte Fragen

Ja. Die Popover API wird in allen wichtigen Browsern unterstützt, einschließlich Chrome, Edge, Safari und Firefox. Sie übernimmt nativ das Ein-/Ausblenden, Top-Layer-Rendering und Light-Dismiss. Für ältere Browser ohne Unterstützung können Sie ein Polyfill oder einen einfachen JavaScript-Fallback verwenden, aber die Baseline-Abdeckung ist breit genug für die meisten Produktionsanwendungen.

Die Popover API behandelt speziell das Ein-/Ausblenden von Popovers. Die Invoker Commands API ist allgemeiner einsetzbar. Sie ermöglicht es Buttons, deklarativ Aktionen auf beliebigen Zielelementen mithilfe der Attribute command und commandfor auszulösen. Dazu gehören das Öffnen von Dialogen, das Umschalten von Popovers und die Steuerung der Medienwiedergabe – alles ohne JavaScript-Event-Listener zu schreiben.

Noch nicht vollständig. Der Wert appearance base-select und das picker-Pseudo-Element sind derzeit in Chromium-basierten Browsern implementiert, während andere Engines noch experimentieren oder die Unterstützung diskutieren. Die Unterstützung in Safari und Firefox ist noch in Arbeit. Wenn Sie heute konsistentes browserübergreifendes Styling für Select-Elemente benötigen, funktioniert ein Progressive-Enhancement-Ansatz am besten: Verwenden Sie base-select dort, wo es unterstützt wird, und fallen Sie anderswo auf Standard-Styling zurück.

Nicht vollständig, aber es verringert die Lücke. OpenUI zielt auf die gängigsten Muster wie Popovers, Selects und Dialoge ab, die jede Bibliothek neu erstellt. Mit zunehmender nativer Browser-Unterstützung werden die Fälle, in denen Sie eine Drittanbieter-Abstraktion benötigen, schrumpfen. Für komplexe, stark angepasste Komponenten bieten Bibliotheken immer noch Mehrwert, aber die Baseline steigt kontinuierlich.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.