Re: [csswg-drafts] [css-scoping] Scoping of functions, other name-defining at-rules and custom idents (#11798)

Some thoughts about the `contain` option.

1\. `@scope` allows having donut scoping, which can be very useful: we can have an _outer_ scope return when the inner scope ends.

```CSS
@scope namespace (.foo) {
    @function --bg() { result: lightgreen }
}

@scope namespace (.bar) to (.bar-end) {
    @function --bg() { result: pink }
}

.test { background: --bg(); }
```

```HTML
<div class="foo">
    <div class="test">I am lightgreen</div>
    <div class="bar">
        <div class="test">I am pink</div>
        <div class="bar-end">
            <div class="test">I am lightgreen again</div>
        </div>
    </div>
</div>
```

Would it be possible to do this with `contain`, and if so, will it be as expressive?

2\. With `contain` it could be easier to “break” the containment by overriding something with a different value of `contain`. To me, it feels weaker than an at-rule. The effect of the scoping is strong: all the ident names will be contained, and it feels better to control this effect on an at-rule level.

3\. My initial idea for this was to not even use `contain`, but allow all the name-defining at-rules to be present on elements. I imagine this can be a pretty significant change, where at-rules will have to live inside a rule alongside declarations. There are benefits from this and could open some more doors, but this also makes things maybe _too_ flexible? And then, it might be confusing to understand how the at-rules inside selectors work without `contain`: do they work by the current rules — only taking the order and layers into consideration? If so, it could be an easy mistake to make where you forget the `contain` and think that an at-rule inside your rule is scoped.

4\. Semantically, I prefer `@scope` to `contain`, after all, we already call this mechanism _scoping_.

But even if I prefer `@scope`, it is nice to have an alternative option to consider, as this allows us to weight both of them, and think deeper about the use cases.

Now we have two options:

1. `@scope namespace` — additional `@scope` keyword, name TBD.
2. `contain: names` — additional `contain` value.

I wonder if there are more options we don't yet see.

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


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

Received on Saturday, 1 March 2025 10:30:04 UTC