[csswg-drafts] [css-cascade-6] grouping multiple scopes (#10093)

mayank99 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-6] grouping multiple scopes ==
Currently there is no way to apply a set of rules to multiple scopes without duplication. `<scope-start>` and `<scope-end>` can be forgiving selector lists, but they create a single scope.

It would be useful to create multiple scopes at the same time. For example:
```css
@scope (.scope1) to (.scope-1-end), (.scope2-start) to (.scope2-end), (.scope3) {
  p { color: hotpink; }
}
```

roughly equivalent to:
```css
@scope (.scope1) to (.scope-1-end) {
  p { color: hotpink; }
}
@scope (.scope2-start) to (.scope2-end) {
  p { color: hotpink; }
}
@scope (.scope3) {
  p { color: hotpink; }
}
```

The main benefit is avoiding duplication (which is tedious and error-prone).

There may also be another benefit around avoiding cascade conflicts/ambiguity, which will be resolved solely through scope proximity. I'd imagine there would need to be a concept of "nearest active scope" within a group of scopes.

---

This would play nicely with some other existing proposals, namely [named scopes](https://github.com/w3c/csswg-drafts/issues/9742) and [stylesheet conditions](https://github.com/w3c/csswg-drafts/issues/9427).

Additionally, if there is ever a way to set scopes when importing stylesheets (in HTML or CSS), this would work there too. For example:
```css
@import "foo.css" scope((.scope1) to (.scope-1-end), (.scope2-start) to (.scope2-end), (.scope3));
```
```css
/* foo.css */
p { color: red; }
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10093 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 16 March 2024 18:41:55 UTC