v134 · miscellaneous

NavigateEvent sourceElement

When a navigation is initiated by an Element (i.e., a link click or a form submission), the sourceElement property on the NavigateEvent will be the initiating element.

concepts

  1. NavigateEvent.sourceElement

    NavigateEvent exposes the triggering element.

  2. Per-link loading indicator

    The TPAC use case that drove sourceElement: light up only the clicked link, not a global top-bar. Twelve links + one interceptor.

  3. Form Router

    Four forms, one navigate handler. Read e.sourceElement → form id + data-intent, route to in-app logic. No URL fiddling, no per-form submit listeners.

  4. Analytics Tracker

    One navigate handler instruments every link and form on a mock product page. Click any element and see intent, category, destination, and form data logged — all from sourceElement, zero per-element listeners.

  5. Link preview

    Five annotated links in an article, each with data-preview-* attributes. The navigate handler reads e.sourceElement to get the title, description, and preview type, then shows a bottom sheet before confirming or blocking. Try the external link (opens in new tab) and the blocked link (navigation cancelled).

why it shipped

This was requested by web developers. It provides an easy way to disambiguate which of several possible elements initiated a navigation.

references