TOC scrolling results in runtime error when heading ID starts with a digit

[chalin]

For example, see https://deploy-preview-7104--opentelemetry.netlify.app/blog/2025/ai-agent-observability/:

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '#2025-year-of-ai-agents' is not a valid selector.
    at Object.findOne (main.js:742:46)
    at ScrollSpy._initializeTargetsAndObservables (main.js:5760:50)
    at ScrollSpy.refresh (main.js:5655:12)
    at new ScrollSpy (main.js:5639:12)
    at ScrollSpy.getOrCreateInstance (main.js:693:43)
    at main.js:5824:17
    at handler (main.js:350:17)

The Issue is that:

• HTML5 allows IDs to start with digits: <h2 id="5-something"> is ok
• CSS selectors do not: querySelector('#5-something') is invalid CSS

From the CSS 2.1 Specification on Identifiers spec:

"In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (); they cannot start with a digit, two hyphens, or a hyphen followed by a digit."

I'd say that this is an upstream bug (check if there are any open issues). Documenting it here for now.