New issue
Advanced search Search tips

Issue 706036 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Mar 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

querySelector on an ID containing a slash errors

Reported by t...@thomasconroy.net, Mar 28 2017 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce the problem:
1. create an element with an id containing a slash
2. perform document.querySelector on the id containing a slash
3. error

What is the expected behavior?
It should select the element. getElementById() has no problem processing the slash, just querySelector. Per the HTML5 spec, all non-whitespace characters are valid ID's. https://www.w3.org/TR/html5/dom.html#the-id-attribute

What went wrong?
Browser behavior does not much the CSS spec for valid ID characters. https://www.w3.org/TR/html5/dom.html#the-id-attribute

Did this work before? N/A 

Does this work in other browsers? No
 other browsers behave similarly to Chrome.

Chrome version: 56.0.2924.87  Channel: stable
OS Version: OS X 10.11.6
Flash Version: 

Can we please make the browser behave consistently with the spec? :)
query-selector-error-demo.html
222 bytes View Download

Comment 1 by woxxom@gmail.com, Mar 28 2017 

Chrome and other browsers are working correctly in this case.

Just because something is valid in HTML markup doesn't mean it'll also work as is when used as a CSS selector. For example, foo.bar is also a valid HTML id but as you can already guess this won't work as a CSS selector as is unless you escape the dot character otherwise interpreted as a class selector. 

CSS selectors specification:

* lexical scanner: https://www.w3.org/TR/CSS21/grammar.html#scanner
* visual diagram:  https://www.w3.org/TR/css-syntax-3/#ident-token-diagram

The ID you use contains invalid characters that need to be escaped:

document.querySelector('#hello\\/world')

Comment 2 by woxxom@gmail.com, Mar 28 2017 

You can also use a helper function:

var id = 'hello/world';
document.querySelector('#' + CSS.escape(id))

Comment 3 by tkent@chromium.org, Mar 29 2017

Status: WontFix (was: Unconfirmed)
woxxom@ is right.
►

Sign in to add a comment