::slotted(X) rules should apply on any X which is a fallback content of a slot.
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
The span is colored blue per its ::slotted psuedo styles
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.
Now tracked by https://github.com/w3c/csswg-drafts/issues/5482
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.