528456 - Implement scoped selectors for querySelector(All)

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, enhancement)

Description

[Giorgio]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.2; it; rv:1.9.2b2) Gecko/20091108 Firefox/3.6b2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; it; rv:1.9.2b2) Gecko/20091108 Firefox/3.6b2

hello,
i think is missing a feature in element.querySelector(All)

it's impossible (probably in js frameworks too)
to select child elements from a previous selected anonymous element

example

var lists = document.querySelector("#myid > ul");
// do some stuff here
lists[0].querySelector("> li"); // not implemented... error!

Reproducible: Always

Comment 1

[Boris Zbarsky [:bzbarsky]]

Right; the spec requires an exception in that case for now.  There's discussion of scoped selectors going on in the working group; the use case is definitely something people are interested in addressing.

Comment 2

[Giorgio]

hi boris... no news about my request?
thank you

Comment 3

[Boris Zbarsky [:bzbarsky]]

http://dev.w3.org/2006/webapi/selectors-api2/#the-scope-pseudo-class

Comment 4

[Boris Zbarsky [:bzbarsky]]

So with that proposal, you'd do:

  lists[0].querySelector(":scope > li");

Comment 5

[Giorgio]

hi Boris, thank you for your reply! it's a honor to talk to you!

why do you propose :scope?
i mean... in Element.querySelector, Element is the scope yet

list.querySelector(" > li");
list.querySelector(":hover > li");
head1.querySelector(":first-line > span");
head1.querySelector(":hover:first-line > span");

Comment 6

[Boris Zbarsky [:bzbarsky]]

> why do you propose :scope?

I'm not.  That's just what the current Selectors API draft has, based on various threads on the www-style and webapps mailing lists.  I realize the syntax jquery uses is the one in comment 5, but that seems likel to not end up being the syntax that's used in Selectors API, for various reasons.

Comment 7

[Giorgio]

ok... anyway, I hope you will put together good features with good APIs
new features of gecko 1.9.1+ are great and i'm "testing" it in "production applications" lol!

thank you for your time! greetings from italy

Comment 8

[Jared Jacobs]

The specification for how :scope should behave has matured and stabilized some since 2010.
It has had no material changes since the 2011 draft:
http://dev.w3.org/csswg/selectors4/#the-scope-pseudo
http://www.w3.org/TR/2011/WD-selectors4-20110929/#scope-pseudo

I see that Firefox has implemented :scope but disabled it by default, requiring:
layout.css.scope-pseudo.enabled

Webkit and Blink, on the other hand, have enabled :scope for use with .querySelector(All) by default. 

Chrome does still require a developer flag to use the scoped attribute with <style> elements:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#Browser_compatibility

Could we, perhaps, remove the flag guard for using :scope with .querySelector(All) now?

I believe that capability is a little more stabile and less risky than scoped style rules, yet still immensely useful. It could also be argued that a flag under layout.css.* should never have been associated with the use of :scope in scripting contexts, completely removed from any layout or CSS concerns. Thanks for considering it.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Hmm.  I guess some of the wild plans people had for the behavior of this in querySelector got canceled....

I believe it would be safe to enable this.  I've sent https://groups.google.com/forum/#!topic/mozilla.dev.platform/sWAY_1GWelE

Comment 10

[Olli Pettay [:smaug][[e-mail]]]

(In reply to jmjacobs from comment #8) 
> Chrome does still require a developer flag to use the scoped attribute with
> <style> elements:
> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/
> style#Browser_compatibility
See https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/R1x18ZLS5qQ

Comment 11

[Boris Zbarsky [:bzbarsky]]

Attachment: Enable :scope support in querySelector and scoped stylesheets by default

Looks like the intent to ship got pretty positive responses

Comment 12

[Boris Zbarsky [:bzbarsky]]

Note that this enables the pseudo in both querySelector and scoped stylesheets.

Comment 13

[Daniel Holbert [:dholbert]]

Looks like this patch drops the pref entirely (making it no longer possible to turn off this feature).  Are you sure you want to do that?

I thought the best-practice for enabling on preffable features was to tweak all.js to drop the RELEASE_BUILD conditional chunk (enabling it everywhere), and then *after* that change has happily shipped in a release build, we can remove all usages of the pref in our code.

(Up until that point, there's always a chance we might need to turn off the feature e.g. if it causes problems that we only detect on beta-channel, and it's nice to be able to do that disabling via a simple pref-tweak.)

Comment 14

[Boris Zbarsky [:bzbarsky]]

I did do that more or less on purpose.  But I guess I could keep the pref and just remove the all.js ifdefs....

Comment 15

[Boris Zbarsky [:bzbarsky]]

Attachment: Minimal change

Comment 16

[Boris Zbarsky [:bzbarsky]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/cc4e2f5d0a2c

Comment 17

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/cc4e2f5d0a2c