::slotted() does not work with pseudo-element selector |
||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 Steps to reproduce the problem: 1. Open https://jsbin.com/cesubirego/edit?html,output or see attached file 2. Check that the header does not have any content after it The two selectors that I tried are: `::slotted(h1::after)` `::slotted(h1)::after` What is the expected behavior? The header should have a `/` after it. What went wrong? The header does not have a `/` after it. Did this work before? No Does this work in other browsers? No Safari Technical Preview does not work with hover and focus and does not show the `/` after the header either. Chrome version: 60.0.3112.90 Channel: stable OS Version: Flash Version: According to the discussion in https://github.com/w3c/webcomponents/issues/331#issuecomment-210064594 the concensus seemed that `::after` should be placed after the `)`. However, reading the specification (https://drafts.csswg.org/css-scoping-1/#slotted-pseudo) the selector inside `::slotted()` is a `compound-selector-list` which boils down to a `simple-selector` which lists the `pseudo-element-selector` as one of its options. Therefore I would expect that, despite the discussion on the GitHub issue, the first selector I tried should be the correct one.
,
Aug 10 2017
Even though the issue was closed, the pseudo element on ::slotted() never reached a conclusion, I think. If you look at the specifications for :not() and :matches(), they both explicitly says pseudo elements are not allowed inside them. The CSS Scoping spec should probably say the same. I've filed https://github.com/w3c/webcomponents/issues/655
,
Aug 10 2017
,
Aug 10 2017
,
Aug 15 2017
,
Aug 24 2017
Resolved by CSSWG and specs edited. CL for review.
,
Aug 28 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/48d99fba8b1f52998570b163f51b114d87b08cdf commit 48d99fba8b1f52998570b163f51b114d87b08cdf Author: Rune Lillesveen <rune@opera.com> Date: Mon Aug 28 12:58:47 2017 Support ::before and ::after pseudo elements after ::slotted. Allow pseudo elements after ::slotted() pseudo elements to allow for scopes to which an element has been slotted to generate ::before / ::after pseudo elements. The scoping spec[1] allows tree-abiding[2] pseudo elements after ::slotted. This CL adds support for ::before and ::after. [1] https://drafts.csswg.org/css-scoping/#slotted-pseudo [2] https://drafts.csswg.org/css-pseudo-4/#treelike Bug: 754081 Change-Id: I95d91ea06d8fa75537cf8c845da477b2fb034a7d Reviewed-on: https://chromium-review.googlesource.com/616042 Commit-Queue: Rune Lillesveen <rune@opera.com> Reviewed-by: Takayoshi Kochi <kochi@chromium.org> Cr-Commit-Position: refs/heads/master@{#497742} [add] https://crrev.com/48d99fba8b1f52998570b163f51b114d87b08cdf/third_party/WebKit/LayoutTests/external/wpt/css-scoping/slotted-parsing.html [add] https://crrev.com/48d99fba8b1f52998570b163f51b114d87b08cdf/third_party/WebKit/LayoutTests/external/wpt/css-scoping/slotted-with-pseudo-element-ref.html [add] https://crrev.com/48d99fba8b1f52998570b163f51b114d87b08cdf/third_party/WebKit/LayoutTests/external/wpt/css-scoping/slotted-with-pseudo-element.html [modify] https://crrev.com/48d99fba8b1f52998570b163f51b114d87b08cdf/third_party/WebKit/Source/core/css/parser/CSSSelectorParser.cpp [modify] https://crrev.com/48d99fba8b1f52998570b163f51b114d87b08cdf/third_party/WebKit/Source/core/css/parser/CSSSelectorParserTest.cpp
,
Aug 28 2017
,
Oct 12 2017
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by mikelawther@chromium.org
, Aug 10 2017Owner: r...@opera.com