Resilience Matrix

Scope

This matrix covers web components only — elements with a JavaScript upgrade lifecycle (connectedCallback, custom element registration). These are the elements where resilience requires deliberate engineering.

Native HTML elements and lightweight custom elements (like <layout-stack> or <form-field>) are not listed here. Native elements get their resilience from the browser platform itself. Custom elements are CSS-only — they have no JS, no upgrade gap, and no failure modes beyond what the browser provides natively.

Legend

Full

Fully supported and tested

Partial

Partially supported — see component notes below

None

Not supported — known limitation, by design

Component Matrix

Dimensions

No-JS

Content and purpose accessible without JavaScript

No-CSS

HTML structure logical and readable without stylesheets

Upgrade Gap

:not(:defined) CSS prevents layout shift during upgrade

Keyboard

Full feature set operable by keyboard alone

Screen Reader

Tested with at least one screen reader

RTL

Layout correct with dir=rtl

Component Notes

Detailed notes for components with Partial or None ratings.

<accordion-wc>

Built on <details>, degrades completely to native disclosure

<audio-player>

Falls back to native <audio> element

<audio-visualizer>

Requires Web Audio API. Canvas is aria-hidden (decorative). No keyboard interaction needed.

<card-list>

Content flows as stacked cards without JS

<carousel-wc>

Degrades to horizontal scroll; all slides visible

<chat-input>

Degrades to a form with textarea

<chat-window>

Content visible but no live updates without JS

<color-palette>

Color values visible as text without JS

<combo-box>

Degrades to native <select> or text input

<command-palette>

Overlay requires JS; hidden until activated

<compare-surface>

Both surfaces visible stacked without JS

<content-swap>

All content visible without JS

<context-menu>

Overlay requires JS; browser context menu available as fallback

<data-table>

Native <table> is fully readable without JS

<drag-surface>

Content visible but not draggable without JS

<drop-down>

Trigger visible; popup content accessible via native disclosure

<emoji-picker>

Requires JS for emoji grid rendering

<foot-notes>

Footnotes are links; fully accessible without JS

<geo-map>

Requires JS for tile rendering. Activate button is focusable; interactive mode supports arrow-key panning and +/- zoom. Map content not describable to screen readers beyond aria-label coordinates.

<heading-links>

Headings remain fully readable; anchor links are an enhancement only

<icon-wc>

Shows empty space without JS; decorative icons acceptable

<include-file>

Slot content or fallback text visible without JS

<page-toc>

TOC not generated without JS but page content remains navigable

<print-page>

Print button non-functional without JS; browser print still available

<qr-code>

Shows URL text fallback without JS

<settings-panel>

Overlay panel requires JS; hidden until activated

<share-wc>

Falls back to copy-link or mailto

<short-cuts>

Overlay requires JS; keyboard shortcuts are JS-driven

<site-search>

Search form visible; results require JS

<slide-accept>

Confirmation visible but slide interaction requires JS

<split-surface>

Both panels visible stacked without JS

<star-rating>

Rating value visible as text; interactive rating requires JS

<tab-set>

Built on <details name>, degrades to native accordion

<text-reader>

Content readable without JS; TTS and controls are enhancement

<theme-picker>

Default theme applied without JS

<toast-msg>

Notifications require JS to trigger

<tool-tip>

Trigger content visible; tooltip text available via title fallback

<type-specimen>

Font samples visible as text without JS