Re: [csswg-drafts] When using @import scope(), are the imported styles 'nested'? (#11756)

@LeaVerou your questions cover a lot of different ground, but let me see if I can clarify.

Selectors inside an `@scope` rule currently:

1. Only match when the selector subject is _inside the scope_. (This is what it means to be a scoped selector)
2. Imply a descendant combinator at the start of the selector, unless `&` or `:scope` is explicitly placed. (this is how 'nested' selectors work)

The scope at-rule applies both scoping and nesting to selectors inside. There is not a way to 'escape the scope' in the first sense. If the subject shouldn't be inside the scope, then the selector doesn't belong in a scope rule. But in the second sense it works like any other nested selectors. By default, we assume an implied descendant combinator - but it can also be placed explicitly:

```css
@scope (article) {
  h2 { /* implicit `:scope h2` */ }

  main :scope h2 { /* explicit, as written */ }
}
```

In that sense, you can have complex selectors that escape the scope to establish context. And yes, `:root` still matches the document root.

One way to implement scoped imports would be to apply only the scoping, but not the nesting. For sure we want to require all matched subjects are _in-scope_. So the question is: _do we also imply an implicit descendant combinator to all selectors in the imported document_, unless they explicitly contain either `:scope` or `&`?

```css
/* importer.css */
@import 'to-be-imported.css' scope(aside);

/* to-be-imported.css */
section h2 { … }
```

What does above `section h2` match?

- If we only apply scoping, we match the selector normally, but only when the matched `h2` is also in scope. So both `:scope section h2` and `section :scope h2` results are valid.
- If we also apply nesting, we imply `:scope section h2` and would not match `section :scope h2`. To achieve that, the `:scope` would have to be placed in the selector explicitly. 

If we want to match the at-rule, we should apply both. But the nesting changes the meaning of selectors, rather than just scoping the results. 

(If we do decide to import nested style sheets, maybe we also would want to allow `@import 'my.css' nested(article)`?

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


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

Received on Wednesday, 26 February 2025 19:17:23 UTC