Intent to Ship: Child-indexed pseudo-classes matching elements without a parent.

[Emilio Cobos Álvarez]

Contact emails:

eco...@igalia.com

Spec:

https://drafts.csswg.org/selectors-4/#child-index

Summary:

Change how the child-indexed pseudo-class selectors are matched so
they also match elements without a parent.

This is a change in the spec from selectors-3 to selectors-4.

The reasoning for this is explained in the spec, but also worth noting
that this behavior makes those selectors work appropriately in shadow
trees.

Issue: https://bugs.chromium.org/p/chromium/issues/detail?id=675670
CL: https://codereview.chromium.org/2588643004/

Is this feature supported on all six Blink platforms (Windows, Mac,
Linux, Chrome OS, Android, and Android WebView)?

Yes

Interoperability and Compatibility Risk:

This change made its way into Gecko a few months ago, see[1]. I would
be surprised if Edge or WebKit implemented it yet.

One known caveat is that this change breaks the Acid3 test, which
explicitly tests for this, see [2], though I don't consider that to be
a major problem (Acid3 has been adapted/fixed more times).

Worth noting that Gecko hasn't found any other web compat issues so
far.

It seems that the consensus is that this change is the way forward,
see the spec text and the discussion in[3].

[1]: https://bugzil.la/1300374
[2]: https://bugzil.la/1311329
[3]: https://github.com/w3c/csswg-drafts/issues/695

[Elliott Sprehn]

Can you explain how this impacts shadow dom? Every element under a shadow root has a parent node as well, it's the ShadowRoot. Only the ShadowRoot itself has a null parent which shouldn't impact selectors since they can't match it.

[Rune Lillesveen]

On Wed, Dec 21, 2016 at 9:20 PM, Elliott Sprehn <esp...@chromium.org> wrote:

Can you explain how this impacts shadow dom? Every element under a shadow root has a parent node as well, it's the ShadowRoot. Only the ShadowRoot itself has a null parent which shouldn't impact selectors since they can't match it.

It doesn't look like it will impact Blink's implementation in this regard because we already do something in between Selectors Level 3 and 4. Selectors Level 3 says we must have a parent _element_, but we currently implement it as element or document fragment. The shadow root is a document fragment, so this currently works even if children of the shadow root does not have an element parent:

<:shadowroot>

  <span>Green</span>

  <style>span:first-child { color:green }

</:shadowroot>

 

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--

Rune Lillesveen

[Rune Lillesveen]

On Thu, Dec 22, 2016 at 12:15 AM, Rune Lillesveen <ru...@opera.com> wrote:

On Wed, Dec 21, 2016 at 9:20 PM, Elliott Sprehn <esp...@chromium.org> wrote:

Can you explain how this impacts shadow dom? Every element under a shadow root has a parent node as well, it's the ShadowRoot. Only the ShadowRoot itself has a null parent which shouldn't impact selectors since they can't match it.

It doesn't look like it will impact Blink's implementation in this regard because we already do something in between Selectors Level 3 and 4. Selectors Level 3 says we must have a parent _element_, but we currently implement it as element or document fragment. The shadow root is a document fragment, so this currently works even if children of the shadow root does not have an element parent:

<:shadowroot>

  <span>Green</span>

  <style>span:first-child { color:green }

</:shadowroot>

I see now that the intent doesn't mention the parent _element_ vs parent _node_ which is an important change here. See the description in the selectors-4 link in the intent.

--

Rune Lillesveen

[Rune Lillesveen]

On Wed, Dec 21, 2016 at 1:27 PM, Emilio Cobos Álvarez <eco...@igalia.com> wrote:

Interoperability and Compatibility Risk:

  This change made its way into Gecko a few months ago, see[1]. I would
  be surprised if Edge or WebKit implemented it yet.

I did not get the querySelector case below to match anything in Firefox 50.1.0 ?

Do they really implement structural pseudos for elements without parents? Or have they just generalized to allow all types of parent nodes?

<!DOCTYPE html>

<script>

    var outer = document.createElement("div");

    var inner = document.createElement("span");

    outer.appendChild(inner);

    document.write(outer.querySelector(":first-child > span"));

</script>

--

Rune Lillesveen

[fri...@jeka.info]

https://bugzilla.mozilla.org/show_bug.cgi?id=1300374 is fixed in Firefox 51

j.j.

[Emilio Cobos Álvarez]

Yeah, opening it on current Firefox Nightly it outputs the expected
"[object HTMLSpanElement]".

Rune is right that in Blink these don't affect shadow DOM because we
allow also parent document fragments (sorry for being misleading, I was
quoting Tab here, but didn't know how shadow DOM was implemented in
Blink specifically).

In any case, that is something that neither selectors-3 (which specifies
needing a parent element[1]), nor selectors-4 (which drops that
requirement) specify.

I think we should align our implementation with the spec. What do you
think?

-- Emilio

[1]: https://drafts.csswg.org/selectors-3/#structural-pseudos

> --
> You received this message because you are subscribed to the Google Groups "blink-dev" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Chris Harrelson]

Hi all,

Pinging this thread. Elliott/Rune, do you have an opinion about Emilio's latest comment?

Chris

> To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Elliott Sprehn]

Yeah so in terms of change in blink behavior this only matters for the documentElement. The code currently allows parentElement or documentFragment, it should allow any parent node instead.

The "without a parent here" refers to element parents in the selectors spec, not the dom concept of parents.

This seems like a reasonable and small change.

[一丝]

Chrome also not support 'Typed Child-indexed Pseudo-classes' in root element.

data:text/html,<html> This text must be green <style>html{color: red;} html:first-of-type{color: green;}</style>

在 2016年12月21日星期三 UTC+8下午8:27:35，Emilio Cobos Álvarez写道：

[TAMURA, Kent]

LGTM1

--

TAMURA Kent
Software Engineer, Google

[Rune Lillesveen]

On Thu, Jan 12, 2017 at 7:28 PM, Chris Harrelson <chri...@chromium.org> wrote:

Hi all,

Pinging this thread. Elliott/Rune, do you have an opinion about Emilio's latest comment?

LGTM

We should make sure the acid3 test is updated.

--

Rune Lillesveen

[Chris Harrelson]

LGTM2

[Rick Byers]

LGTM3

[Joe Medley]

Emilio,

Can you please create a tracking bug and Chrome Status entry as per the instructions.

Thanks

Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195

If an API's not documented it doesn't exist.

[Manuel Rego Casasnovas]

Hi,

On 20/01/17 00:30, 'Joe Medley' via blink-dev wrote:
> Can you please create a tracking bug

> <https://bugs.chromium.org/p/chromium/issues/list> and Chrome Status
> <https://www.chromestatus.com/features> entry as per the instructions
> <http://www.chromium.org/blink/launching-features>.

Chrome Status entry added:
https://www.chromestatus.com/feature/5705677431373824

Do we need to report a new tracking bug?
Or is it enough with the current bug?
https://bugs.chromium.org/p/chromium/issues/detail?id=675670

Thanks,
Rego

[Joe Medley]

Thank you.

Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195

If an API's not documented it doesn't exist.