Hash Routing Failure in Stoplight Elements v9.0.x

[drewzhao]

Context

This bug prevents users from navigating API documentation in a VitePress website using Stoplight Elements v9.0.1 with router="hash". When clicking navigation links, the URL hash updates (e.g., from #/operations/someOperation to #/paths/someEndpoint), but the displayed content does not change, rendering the documentation unusable for navigation. This regression disrupts the user experience compared to version 8.5.2, where navigation works as expected.

Current Behavior

When using Stoplight Elements v9.0.1 with router="hash", clicking a navigation link updates the URL hash, but the API documentation content in the Stoplight Elements UI does not update. For example, navigating from #/operations/someOperation to #/paths/someEndpoint changes the URL, but the UI remains on the original operation. Browser hashchange events fire correctly, indicating the issue lies within Stoplight Elements' routing logic.

Expected Behavior

Clicking navigation links within the Stoplight Elements component should update both the URL hash and the displayed content to reflect the selected API endpoint or section, as it does in version 8.5.2.

Possible Workaround/Solution

Workarounds

Use Version 8.5.2: Downgrading to Stoplight Elements v8.5.2 resolves the issue, as hash-based navigation works correctly.

Possible Fix

None as I know of.

Steps to Reproduce

1. Set up a VitePress website with Stoplight Elements v9.0.0/v9.0.1 integrated using the web components approach, as shown in the code below.
2. Configure the <elements-api> component with router="hash" and a valid OpenAPI specification.
3. Navigate to the page rendering the API documentation (e.g., /docs/api.html).
4. Click a link within the Stoplight Elements component to navigate to a different section (e.g., from #/operations/someOperation to #/paths/someEndpoint).
5. Observe that the URL hash updates, but the displayed content does not change.

Integration Code

The following VitePress markdown file demonstrates the integration:

---
title: "API Reference"
description: "This document provides the API reference for the service."
layout: page
sidebar: false
pageClass: ElementApi
---

<script setup>
import { onMounted } from 'vue';
import { withBase } from 'vitepress';
const stoplightVersion = '9.0.1';

onMounted(() => {
  if (typeof window !== 'undefined' && typeof document !== 'undefined') {

    // Prevent multiple script injections
    if (!document.querySelector(`script[src="https://fastly.jsdelivr.net/npm/@stoplight/elements@${stoplightVersion}/web-components.min.js"]`)) {
      const script = document.createElement('script');
      script.src = `https://fastly.jsdelivr.net/npm/@stoplight/elements@${stoplightVersion}/web-components.min.js`;
      script.defer = false;
      document.body.appendChild(script);
    }

    // Prevent multiple stylesheet injections
    if (!document.querySelector(`link[href="https://fastly.jsdelivr.net/npm/@stoplight/elements@${stoplightVersion}/styles.min.css"]`)) {
      const styleLink = document.createElement('link');
      styleLink.rel = 'stylesheet';
      styleLink.href = `https://fastly.jsdelivr.net/npm/@stoplight/elements@${stoplightVersion}/styles.min.css`;
      document.head.appendChild(styleLink);
    }

  }
});

const apiUrl = withBase('/openapi/spec.yaml')
</script>

<ClientOnly>
  <elements-api
    :apiDescriptionUrl="apiUrl"
    router="hash"
    hideInternal="true"
    layout="responsive"
  />
</ClientOnly>

Environment

• Version used: Stoplight Elements v9.0.0/v9.0.1 (v8.5.2 works correctly)
• Environment name and version: Google Chrome 135.0.7049.42
• Operating System and version: MacOS 15.3 (24D60)