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

> I believe `contain: name` is for containing idents that originate in CSS properties: anchor names, container names, etc. Those are already attached to elements by default, so it's clear where the containment originates from, and we can contain how far they spread. With name-defining at-rules, we're starting from a detached global, and we need a way to attach it to specific elements.

Ideally, the mechanism for both would be the same, no? If name-defining at-rules could be allowed within selectors, `contain: names` would be able to contain the names of both name-defining at-rules and idents.

The example @kizu gave could then be rewritten to the following, which I believe is easier to understand as you don’t have to connect a few things.

```css
.foo {
 contain: names;
 @function --bg() { result: lightgreen }
}

.bar {
 contain: names;
 @function --bg() { result: pink }
}

.foo, .bar, .baz {
 background: --bg();
}
```

```html
<div class="foo">lightgreen</div>
<div class="bar">pink</div>
<div class="baz">transparent (because there is no --bg available)</div>

<div class="foo">
  <div class="baz">lightgreen (because the one from .foo is used)</div>
</div>
```

Using `@scope` is still possible with this, but it’s not `@scope` that forces the name containment:

```css
@scope (.foo) {
 contain: names;
 @function --bg() { result: lightgreen }
}

@scope (.bar) {
 contain: names;
 @function --bg() { result: pink }
}
```

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


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

Received on Friday, 28 February 2025 10:31:36 UTC