Bug 169948 - ::slotted should apply for fallback contents
Summary: ::slotted should apply for fallback contents
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
Reported: 2017-03-21 23:54 PDT by Ryosuke Niwa
Modified: 2020-09-24 23:16 PDT (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Ryosuke Niwa 2017-03-21 23:54:57 PDT
See https://github.com/w3c/webcomponents/issues/631

::slotted(X) rules should apply on any X which is a fallback content of a slot.
Comment 1 Radar WebKit Bug Importer 2018-08-01 22:29:07 PDT
Comment 2 Greg Whitworth 2020-08-25 16:48:36 PDT
We have hit this at Salesforce which is blocking us from leveraging this on our site(s) unfortunately. I have filed bugs on Gecko and Chromium regarding this issue. Here is content from those bugs:

What steps will reproduce the problem?
(1) Open the following JSFiddle: https://jsfiddle.net/z3278s5k/4/
- Here's a simplified repro (https://jsfiddle.net/yoashcrL/)
(2) Review the results in Chromium vs Safari

Actual results:

The span is colored blue per its ::slotted psuedo styles

Expected results:

It maintains the default text color

Here are some additional details:

Some addition context from the CSS psuedo spec, it states that the slotted psuedo element should apply to elements in the flattened tree that are slotted. (https://drafts.csswg.org/css-scoping/#slotted-pseudo)

There is a testcase in WPT that tests nested slots and while the test runner shows a pass for Chromium browser you'll notice that the rendering does not match the test itself. It says that the text should be green and it receives the default styles as well. http://wpt.live/css/css-scoping/slotted-nested.html

This is negatively impacting us at Salesforce and we're having to have our teams work around this issue and we'd like to leverage the native support for this capability but can't currently due to this issue.

We have filed a bug on Chromium as well here where we discussed the spec:

which was merged into this one:

Futhark has opened a CL for the change.
Comment 3 Ryosuke Niwa 2020-08-31 19:14:37 PDT
Now tracked by https://github.com/w3c/csswg-drafts/issues/5482
Comment 4 Ryosuke Niwa 2020-09-24 23:16:33 PDT
Given the latest discussion in CSS WG at https://github.com/w3c/csswg-drafts/issues/5482, this bug is not to be fixed. The current behavior of WebKit is correct except https://bugs.webkit.org/show_bug.cgi?id=179402 needs to be fixed.