Not working with identifiers starting with a digit.

[JulianCataldo]

trafficstars

Hello there.

Got this error when trying to scroll to an anchor with an ID starting with a digit :

vue-scrollto.js?f13c:180 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#3-scripts' is not a valid selector.

Notes : IDs are generated with rehype slug, using github-slugger

ID with a digit first are valid spec int HTML, but not a valid CSS Selector. Could be possible to failsafe that without changing slug generation policy though.

Some insights : https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers

https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

document.querySelector("[id='1']")

[hacknug]

@rigor789 the solution would be to use CSS.escape() to get the actual className you can use with JS.

document.querySelector('#' + CSS.escape('999-id-with-special-characters'))

[rigor789]

@hacknug I'm open to adding that - but definitely need to check for CSS.escape existence and fallback to not using it for unsupported browsers. Mind opening a PR?

[hacknug]

@rigor789 sure! Will take a look on Monday. Keep in mind we will most likely need to use a polyfill or something to make it work on node.

Do we have tests to ensure nothing breaks after the changes?