v152 · ua image replacement
A product page that adapts
The explainer's own example: a zoom lens that hides while the image is replaced. The listeners below are real addEventListener calls for the proposed event names, and they are woken by dispatched events because no browser will send real ones yet — which is stated on the page, not just here.
The product
Field jacket, waxed cotton
Photographed on a 6ft model wearing size M.
Showing a browser-provided variationColour
The swatch you picked is the one photographed.
The buttons dispatch events, and dispatched events are not the browser doing anything — the image is unchanged and this page is drawing a different pattern to stand in for a replacement. What is real is the handler code: it is what a page would ship, and a genuine uareplacestart would run it without a line changing.
What the page did about it
Three adaptations, in the order the explainer suggests: hide the controls that describe the pixels, label the substitution so the user is not misled, and stop claiming the photograph shows the option they selected. None of that is possible without being told.
Three endings, one event
uareplaceend fires when the substitution finishes, fails, or is reverted. A handler that treats it as "back to normal" is right in one of those three cases — so the correct handler reads replacedByUserAgent rather than assuming, which is what the failure button demonstrates.