JST is light DOM and wraps nothing. A Web Awesome element is just a
custom element sitting in the page, so it composes with JST with no
adapter. This page bridges the data flow in both directions
and maps the theme, using only free-tier Web Awesome
components: wa-rating, wa-switch,
wa-badge, wa-card, wa-callout.
A registered custom element is already a preservation boundary under JST's
morph, so JST re-renders around a wa component without reconciling its
internals away. If the Web Awesome CDN is blocked, the wa-*
elements stay inert and the JST parts keep working.
A JST declared attribute (stars) drives the wa-rating's
value. The buttons mutate JST state; the stars follow.
The wa-rating's change event is caught by a JST handler that
writes JST state, which JST renders back out as text.
A few Web Awesome --wa-* custom properties are mapped
from the --jst-* variables in CSS (see the
body block in this page's styles). They live on
body, not :root, because a custom property's
var() is substituted against the same element: the mapping and
the accent override both sit on body so re-theming re-resolves
them. Re-theme JST and the wa components re-theme with it. The button below
overrides a single JST variable, --jst-accent; watch the rating,
switch, and badge all recolor.
wa-callout also picks up --jst-accent through
the bridge. Same technique works for typography and every other
Web Awesome --wa-* custom property.
Attributes down, events up, and a variable bridge for theming: three small seams, no wrapper, no adapter. JST stayed a thin layer over the light DOM and Web Awesome's custom elements just composed. Registered custom elements are preservation boundaries, so it holds up under morph swaps too.