You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As I think it is intended, and as it is currently implemented in Chrome, the :scope in this case should match “The scoping rootnode” (quoting the specs), with the “node” being important, and meaning it should not match just any similar scoping root.
However, the current implementation in Safari Technology Preview seems to treat it as something similar to :where(&) (with the specificity of a pseudo-class), here is a CodePen with an example: https://codepen.io/kizu/pen/WNmeLre
HTML & CSS for this example
<divclass="root outer"><divclass="test">this should be lightgreen</div><divclass="limit"><divclass="root"><divclass="test inner">this should be lightgreen</div></div></div></div>
@scope (.root) to (.limit) {
.test {
background: lightgreen;
}
/* This should never match for our HTML structure */:scope.outer .test.inner {
background: tomato;
}
}
In Chrome, we can see two light-green elements, but in Safari TP the second one is tomato.
I think the way it works in WebKit is due to the misinterpretation of the spec. If this is a case, maybe the spec could be clarified? I think, the minimal clarification could be to add the “node” wording to the :scope's definition, but perhaps a more verbose explanation of what this should mean in practice (could be as a note?) could be added as well.
The text was updated successfully, but these errors were encountered:
:scope only matches the scoping root (which is not the <scope-start> or &), the spec sounds clear to me about this. I used the word "representing" (for a lack of better one) to explicitly not say "matching" : the scoping root might be any .a element, but the :scope is exclusively matching this precise element. The example you provide look like a WebKit implementation bug, thanks for finding this.
I still think that maybe the spec could be improved — I did find it mostly satisfying, but still did decide to fill an issue, as it was not 100% clear, at least to me as an author. But, possibly, this issue is minor enough to be just closed — I'll leave it for the spec editors to decide.
I did recently add a test for one
:scope
use case: web-platform-tests/wpt#43697When approving it, @mdubet mentioned a thing that led me to go and test how
:scope
behaves in the current WebKit implementation:To me, the “any
.a
elements” sounds incorrect. Per the current specs (https://drafts.csswg.org/css-cascade-6/#scope-effects):As I think it is intended, and as it is currently implemented in Chrome, the
:scope
in this case should match “The scoping root node” (quoting the specs), with the “node” being important, and meaning it should not match just any similar scoping root.However, the current implementation in Safari Technology Preview seems to treat it as something similar to
:where(&)
(with the specificity of a pseudo-class), here is a CodePen with an example: https://codepen.io/kizu/pen/WNmeLreHTML & CSS for this example
In Chrome, we can see two light-green elements, but in Safari TP the second one is tomato.
I think the way it works in WebKit is due to the misinterpretation of the spec. If this is a case, maybe the spec could be clarified? I think, the minimal clarification could be to add the “node” wording to the
:scope
's definition, but perhaps a more verbose explanation of what this should mean in practice (could be as a note?) could be added as well.The text was updated successfully, but these errors were encountered: