- From: Roman Komarov via GitHub <sysbot+gh@w3.org>
- Date: Thu, 21 Dec 2023 15:13:56 +0000
- To: public-css-archive@w3.org
kizu has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-cascade-6] clarification of `:scope` matching in nested scopes == While testing different ways scopes interact when being nested, and how `:scope` behaves inside them in both Chrome and Safari Technology Preview, I found a difference in how the browsers treat the `:scope` when there are nested scopes present. Here is a CodePen with the example: https://codepen.io/kizu/pen/xxBxKao <details> <summary>HTML & CSS for this example</summary> ```HTML <div class="outer"> <div class="inner"> <div class="test">this should be lightgreen</div> <div class="test never">this should be lightgreen</div> <div class="test unwrapped">this should be lightgreen</div> </div> </div> ``` ```CSS @scope (.outer) { .test { background: red; } @scope (.inner) { :scope.inner .test { background: lightgreen; } /* This should never match */ :scope.outer .test.never { background: tomato; } } } @scope (.outer .inner) { :scope.inner .unwrapped { background: lightgreen; } } ``` </details> I consider the way it works now in Chrome (the `:scope` matches the innermost closest defined scope) as correct. I did not find anything in the specs (https://drafts.csswg.org/css-cascade-6/#scope-scope) outside [example 8](https://drafts.csswg.org/css-cascade-6/#example-49f2905a), which shows the scope equivalence, where the `:scope` matches the inner scoping root. Given how Safari currently uses the topmost scoping root instead, I think it would be nice to clarify the behavior of the `:scope` inside nested scopes explicitly in the normative parts of the spec, so there will be less left for interpretation. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9741 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 21 December 2023 15:13:58 UTC