Native Html Interactive
Prefer native HTML interactive elements — <details>, <dialog>, <input popover>, <meter>, <progress>, inert attribute — over custom JavaScript implementations for accordions, modals, tooltips, and progress indicators.
$ aoe install @community/pattern-native-html-interactiveProjection
Always in _index.xml · the agent never has to ask for this.
NativeHtmlInteractive [pattern] v1.0.0
Prefer native HTML interactive elements —
Loaded when retrieval picks the atom as adjacent / supporting.
NativeHtmlInteractive [pattern] v1.0.0
Prefer native HTML interactive elements —
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Patterns
- /
: accordion/FAQ without JS; browser manages open/close, disclosure triangle; style with ::marker
- popover API: anchor tooltips and dropdowns with popover='auto' + popovertarget; browser handles dismiss on outside click
- inert attribute: block interaction and AT with inert='true' on background content behind modal — replaces aria-hidden + tabindex=-1 trees
: semantic gauge (battery, disk usage); - : native color picker without a 500-line component
Browser Support
dialog: 100% Baseline 2023; popover: Baseline 2024 (Chrome 114+, Firefox 125+, Safari 17+); inert: Baseline 2023
When To Use Custom
- Complex multi-select combobox with search and grouping
- Date range picker with custom calendar logic
- Rich-text editor content areas
- Command palette with fuzzy search
Loaded when retrieval picks the atom as a focal / direct hit.
NativeHtmlInteractive [pattern] v1.0.0
Prefer native HTML interactive elements —
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Patterns
- /
: accordion/FAQ without JS; browser manages open/close, disclosure triangle; style with ::marker
- popover API: anchor tooltips and dropdowns with popover='auto' + popovertarget; browser handles dismiss on outside click
- inert attribute: block interaction and AT with inert='true' on background content behind modal — replaces aria-hidden + tabindex=-1 trees
: semantic gauge (battery, disk usage); - : native color picker without a 500-line component
Browser Support
dialog: 100% Baseline 2023; popover: Baseline 2024 (Chrome 114+, Firefox 125+, Safari 17+); inert: Baseline 2023
When To Use Custom
- Complex multi-select combobox with search and grouping
- Date range picker with custom calendar logic
- Rich-text editor content areas
- Command palette with fuzzy search
Relations
related: [@community/rule-aria-native-first, @community/anti-pattern-breaking-keyboard-flow, @community/constraint-focus-trap-modal, @community/check-focus-visible, @community/anti-pattern-invisible-focus, @community/anti-pattern-outline-suppression]
Rationale
Native elements provide built-in keyboard support, accessibility semantics, browser-managed focus trapping, and zero JavaScript overhead. Custom implementations must replicate all this manually and frequently miss edge cases.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Patterns
- /
: accordion/FAQ without JS; browser manages open/close, disclosure triangle; style with ::marker
- popover API: anchor tooltips and dropdowns with popover='auto' + popovertarget; browser handles dismiss on outside click
- inert attribute: block interaction and AT with inert='true' on background content behind modal — replaces aria-hidden + tabindex=-1 trees
: semantic gauge (battery, disk usage); - : native color picker without a 500-line component
Browser Support
dialog: 100% Baseline 2023; popover: Baseline 2024 (Chrome 114+, Firefox 125+, Safari 17+); inert: Baseline 2023
When To Use Custom
- Complex multi-select combobox with search and grouping
- Date range picker with custom calendar logic
- Rich-text editor content areas
- Command palette with fuzzy search
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/pattern-native-html-interactive/atom.yaml