demo · v135

Which element kicked off this navigation?

The shared-page-transition use case from the explainer: an SPA's navigation handler needs to identify the source element to start a contextual View Transition (e.g. expand the clicked card). Before sourceElement, libraries had to install global click delegates and reverse-engineer the source from the click event — brittle, and broke for form-submission navigations entirely. Click any link, submit any form below, and watch the property report the originator.

navigation.sourceElement: ?

link clicks

article 1 article 2 article 3

form submit

the code

navigation.addEventListener("navigate", (e) => {
  const src = e.sourceElement;            // NEW in Chrome 135
  if (src instanceof HTMLAnchorElement) intercept(src);
  else if (src instanceof HTMLButtonElement) submitFlow(src.form, src);
});

see also