Re: [csswg-drafts] [css-cascade] Can we use `@scope` for style isolation? (#11002)

We'll want to be careful about naming something like this. _Isolation_ might imply to authors that styles from 'outside' won't inherit _into_ the scope. That sort of isolation-from-outside by definition has to be handled from the DOM. We can't have some style rules blocking other style rules from matching the same elements. This feature is limited to scoping the declarations that are defined inside the scope rule, so they don't _get out_.

But even then, I'm not sure how we would actually want this to work. When a non-scoped element 'slotted' into our scope is defaulting, and would normally inherit… now what?

I would expect that I maybe inherit from _the parent of the scope root_ or something like that? We ignore the styles on any elements in our scope, and inherit styles from elsewhere on the page. I think this is somewhat intuitive, and maybe what you're asking for? But I don't think it works with a selector-based scope. We inherit values _from elements, not from declarations_. What do we do with values that were applied from out-of-scope, but apply to in-scope elements? What if those values were discarded in the cascade?

To do that consistently, we wouldn't be ignoring only the scoped declarations, we would also have to ignore _un-scoped_ (or un-isolated) declarations that match in-scope elements.

```html
<style>
:root { color: green; }
.scope-root { color: teal; }
.in-scope { color: blue; }

@​scope isolated (.scope-root) to (.foo) {
  .in-scope { color: hotPink; }
}

</style>
<div class="scope-root">
  This text is teal
  <div class="in-scope">
    <div class="foo">What color is this??</div>
  <div>
</div>
```

- It can't be `hotPink`, that was isolated
- Probably not `blue`? We can't inherit a color that was never applied, right?
- We could look at the parent to get `teal`, but is that confusing? Why would we inherit from an element that we think of as in-scope?
- We could skip over that, and use `green`, but that's even more confusing. Does our scope rule isolate styles that aren't even scoped??

---

I think the only way to make sense of this is that elements/properties need to opt out of inheritance explicitly - and specify a new place to get the value from.

A new global `revert-scope` keyword might be part of that. When that is the cascaded value, we would have to ignore any values set in the 'same' scope rule – and default to values from elsewhere. 'Same' here would have to be lexically defined as the nearest (nesting-wise) at-scope rule block where the keyword is being applied. That means the result is not an implicit 'inheritance' from somewhere else, but an explicit defaulting, like we get from `revert-layer`.

I like that this syntax clarifies _where the new default will come from_. But this approach comes with a big limitation. The lower boundary elements are excluded from the scope, so they can't be styled from the 'same' scope as the styles we want to revert. It would not be possible to have all the lower-boundary selectors `revert-scope` – unless we also provide a `:scope-end` selector.

Maybe we should provide that anyway? See #8617 

---

But I wonder if we really want (or _also want_) a way to 'inherit from named ancestor x'?


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


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

Received on Wednesday, 9 October 2024 22:44:42 UTC