Issue metadata
Sign in to add a comment
|
currentScript.ownerDocument.querySelector only finds queries with lower case IDs
Reported by
joopmicr...@gmail.com,
Apr 22 2016
|
||||||||||||||||||||||||
Issue description
Chrome Version : 52.0.2714.0 canary
Other browsers tested:
52.0.2714.0 canary ==> FAIL
50.0.2661.87 m ==> OK
49.0.2623.112 m ==> OK
have tested this issue:
Firefox: 45.0.1 ==> OK
IE: 11.212.10586.0 ==> OK
=========================
In canary currentScript.ownerDocument.querySelector or querySelectorAll, only gives queries with tag selection other querySelections fail.
Run the included code from webserver. (I used chrome dev editor any will do)
For FF and IE I included webcomponents-lite to be able to html import.
in canary:
currentScript.ownerDocument.querySelector('template') ==> works
currentScript.ownerDocument.querySelector('template#tempId') ==> doesn't work
currentScript.ownerDocument.querySelector('#tempId') ==> doesn't work
in others:
currentScript.ownerDocument.querySelector('template') ==> works
currentScript.ownerDocument.querySelector('template#tempId') ==> works
currentScript.ownerDocument.querySelector('#tempId') ==> works
=========================
------------------------- index.html START
<html>
<head>
<!--<script src="webcomponents-lite/webcomponents-lite.js"></script>-->
<link rel="import" href="template.html"/>
</head>
<body>
</body>
</html>
------------------------- index.html END
------------------------- template.html START
<template id="tempId">
<style>
#tempcont{
border:1px solid green;
}
</style>
<div id="tempcont">
Template Content
</div>
</template>
<script>
var currentScript = document._currentScript || document.currentScript;
var doc = currentScript.ownerDocument;
var founds = {
'qs_template': doc.querySelector("template"),
'qs_template#tempId': doc.querySelector("template#tempId"),
'qs_#tempId': doc.querySelector('#tempId')
}
for(var i in founds)
console[founds[i]?'debug':'error']('querySelector("'+i+'") '+(founds[i]?'':'not ')+'found');
</script>
------------------------- template.html END
,
Apr 25 2016
no that is not the problem that I'm facing. The problem you are facing is because you opened the files from local filesystem.
The files need to be served, not opened from local file. I use 'google dev editor' since it has a build in webserver to serve the files but any will do.
The problem is that querySelector and querySelectorAll in currentScript.ownerDocument can't find selectors other than tag name selectors.
The works.png shows the result of working browsers
chrome 50.0.2661.87 m ==> OK
chrome 49.0.2623.112 m ==> OK
Firefox: 45.0.1 ==> OK
IE: 11.212.10586.0 ==> OK
The doesNotWork.png shows the result of chrome 52.0.2714.0 canary
(document._currentScript || document.currentScript).ownerDocument.querySelector("template"); // finds template element
(document._currentScript || document.currentScript).ownerDocument.querySelector("template#tempId"); // does not find template element
(document._currentScript || document.currentScript).ownerDocument.querySelector("#tempId"); // does not find template element
,
Apr 25 2016
Thank you for providing more feedback. Adding requester "tkonchada@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 26 2016
Removing myself as owner as no action required from my end.
,
Apr 26 2016
,
Apr 27 2016
today, tested on chrome 52.0.2717.0 canary which also fails.
,
May 27 2016
After some testing on current stable Chrome 51.0.2704.63 I found it seems to be related to the casing of the id and the query. Attached is another testcase and a screenshot from the console output. There is an element with id 'CaseSensImport' and the query '#CaseSensImport' does not return it. On the other side we have a query '#CaseInsensImport' which returns the element with lowercase id 'caseinsensimport' It seems like the query is lowercased before being applied..
,
Jul 1 2016
,
Jul 4 2016
Confirmed on Chrome 51 stable and 52 beta.
Seeing in console:
querySelector("qs_template") found
querySelector("qs_template#tempId") not found
querySelector("qs_#tempId") not found
After lowercasing tempId in the element and queries I see:
querySelector("qs_template") found
querySelector("qs_template#tempId") found
querySelector("qs_#tempId") found
This seems related to the HTML import on the page.
,
Jul 8 2016
,
Jul 29 2016
Assign hayato@ for triage
,
Aug 1 2016
HTML Import => kochi@, could you triage this?
,
Aug 1 2016
alancutter@ do you have any idea why this is a regression? I don't think so, so if you have any clue, please let me know. This could be related to/same as issue 621172 , adding dominicc@ in cc. Can this be just quirks mode applied to imported document?
,
Aug 1 2016
Yes indeed I tested the files of issue 621172 and they seem to present the same problem. Since there are capitals in the template id the querySelector won't match. Changing it to lowercase results in a match of both querySelector and getElementById.
,
Oct 12 2016
,
Feb 24 2017
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by tkonch...@chromium.org
, Apr 25 2016Labels: Needs-Feedback
161 KB
161 KB View Download