matches() and querySelector() reject all-digit id selectors (#1234) in HTML5
Reported by
eric.rannaud@gmail.com,
Jun 17 2016
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36 Example URL: Steps to reproduce the problem: 1. Open chromium-id-syntax.html in attachment 2. Check the console for a SyntaxError What is the expected behavior? According to the HTML5 spec (https://www.w3.org/TR/html5/dom.html#the-id-attribute): "There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc." No exception should be thrown and the assert should pass. What went wrong? Uncaught SyntaxError: Failed to execute 'matches' on 'Element': '#42' is not a valid selector. Does it occur on multiple sites: Yes Is it a problem with a plugin? N/A Did this work before? No Does this work in other browsers? No Firefox 47.0 Chrome version: 51.0.2704.84 Channel: n/a OS Version: Chromium, on Linux nc052 4.6.2-1-ARCH #1 SMP PREEMPT Wed Jun 8 08:40:59 CEST 2016 x86_64 GNU/Linux Flash Version:
,
Jun 17 2016
,
Jun 17 2016
I didn't notice until after I tried this on Mac that the bug was marked Linux. I took a screen capture of DevTools showing that it doesn't work here: Google Chrome 51.0.2704.84 (Official Build) (64-bit) Revision 9125d1d23608a4fe105afb75b0c480a8dd3eef93-refs/branch-heads/2704@{#705} OS Mac OS X Blink 537.36 (@9125d1d23608a4fe105afb75b0c480a8dd3eef93) JavaScript V8 5.1.281.59 Flash 21.0.0.242
,
Jun 20 2016
Clarifying with the spec: https://github.com/w3c/csswg-drafts/issues/202 As a workaround you can escape '#42' as '#\34 \32'
,
Jun 21 2016
Sorry, this is working as intended. You will need to escape the ID in the selector: * https://github.com/w3c/csswg-drafts/commit/15c009f6b48863b00e8097be1f079925af42959c * https://github.com/w3c/csswg-drafts/issues/202#issuecomment-227244821
,
Jun 22 2016
I think you meant to escape it as
document.querySelector('#\x34\x32')
but this also throws:
VM602:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#42' is not a valid selector.
,
Jun 22 2016
Comment 4 is accurate, css selectors require id type selectors so anything starting with a digit will need to be escaped. You can call CSS.escape() on the id before prepending a # if you just have a string id that you want to query for. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by eric.rannaud@gmail.com
, Jun 17 2016Note that document.getElementById("42") succeeds and document.querySelector("#42") does not.