Re: [csswg-drafts] [css-scoping] Inclusive vs exclusive lower boundary (#6577)

Just a quick idea: Considering how `(foo) to inclusive (bar)` is the same as `(foo) to exclusive (bar) > *`, it might be easier for the short hand syntax using slash to simply use that instead:

```css
(.post / .comment) .title { font-size: 2em; } /* Exclusive */
(.post / .comment > *) .title { font-size: 2em; } /* Inclusive */
```

So I'm starting to think that maybe selector scope notation should always be exclusive. For one, the shorter syntax already looks a lot more esoteric than a `@scope` rule with `to` as a separator, so there's also less reason to express exclusivity vs. inclusivity with an expressive keyword.

And `> *` has the advantage of already being a known CSS idiom, which imo makes it better than the `/` vs `//` distinction which is completely new.

As for the idea of using the slash syntax for @scope rules, while I like the consistency that would bring, I really hate how esoteric the slash looks compared to the `to` keyword. On the other hand, `/` is used to mean "to" in other places already, like in grid `grid-row` / `grid-column`.

<details>
<summary>Tangent regarding grid</summary>

One minor detail here: When using `grid-row` or `grid-column`, one technically doesn't work with rows/columns but with grid lines; however, when using numeric values, these actually correspond to actual row/column numbers with an exclusive second value.

For example:

```css
p { grid-column 1 / 2; }
```

could be thought of as "From column 1 to excluding 2"

Because of that, it would feel more consistent for `/` to also be exclusive in the case of scope.
</details>

-----

So here's what I would currently consider ideal:

```css
@scope (outer-component) to (inner-component) {} /* Default exclusive, to be consistent with selector notation */
@scope (outer-component) to exclusive (inner-component) {}
@scope (outer-component) to inclusive (inner-component) {}
(outer-component / inner-component) h1 { font-size: 2em } /* Exclusive */
(outer-component / inner-component > *) * { color: red; }
```

<details>
<summary>And, just to throw this idea in the room</summary>

```css
(outer-component /> inner-component) * { color: red; }
```

It's not what I would consider pretty, nor excessively easy to visually parse nor understand; but at least the `>` mimics the `> *` to hint that it includes one direct child. I still hate it, but a lot less than `//` which gives you no hint whatsoever how it differs from single slash.
</details>

-- 
GitHub Notification of comment by DarkWiiPlayer
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6577#issuecomment-1077470588 using your GitHub account


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

Received on Thursday, 24 March 2022 10:25:40 UTC