[css-cascade-6] grouping multiple scopes

[mayank99]

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:

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

roughly equivalent to:

@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 should play nicely with some other existing proposals, including named scopes, scope() in @import/<link> and stylesheet conditions.