|
// Attempt to match the selector from that root. querySelector' doesn't support IDs that start with a digit, so work around that limitation |
|
const elementMatch = hash.match(ID_WITH_LEADING_DIGIT_REGEXP) != null ? root.getElementById(hash.slice(1)) : root.querySelector(hash); |
hash from an anchor is passed directly to root.querySelector with our regard for what might be contained in the hash.
Hash-routing libraries store the route in the hash. For example an anchor tag may have #!/foo/bar as the value for the href.
Passing this value to root.querySelector causes an error, for example SyntaxError: The string did not match the expected pattern. in safari or Uncaught DOMException: Document.querySelector: '#!/foo' is not a valid selector in FIrefox.
This could be solved in two ways:
- a simple try/catch
- further expand the regex to allow for detecting a valid query selector string before passing it to
querySelector
@wessberg if you have a preference between the two approaches (or have an alternative suggestion) I am happy to open a PR that fixes the bad assumption around what can live in a hash.
scroll-behavior-polyfill/src/patch/anchor/catch-navigation.ts
Lines 33 to 34 in 0e4973c
hashfrom an anchor is passed directly toroot.querySelectorwith our regard for what might be contained in the hash.Hash-routing libraries store the route in the hash. For example an anchor tag may have
#!/foo/baras the value for the href.Passing this value to
root.querySelectorcauses an error, for exampleSyntaxError: The string did not match the expected pattern.in safari orUncaught DOMException: Document.querySelector: '#!/foo' is not a valid selectorin FIrefox.This could be solved in two ways:
querySelector@wessberg if you have a preference between the two approaches (or have an alternative suggestion) I am happy to open a PR that fixes the bad assumption around what can live in a hash.