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

> 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.
> 
> ```
> <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 remember now what I was originally thinking when I proposed this. My line of thinking was that the subtree with `@scope isolate …` would get yanked out of the main tree along with its styles, so in this example here you’d end up with essentially two trees being styled individually from each other.

- tree 1:

  ```html
  <style>
  :root { color: green; }
  .scope-root { color: teal; } /* Doesn’t match anything */
  .in-scope { color: blue; } /* Doesn’t match anything */
  </style>
  <div class="foo">What color is this??</div>
  ```

- tree 2:

  ```html
  <style>
  @​scope isolated (.scope-root) to (.foo) {
    .in-scope { color: hotPink; }
    :scope-end { color: revert-scope; }
  }
  </style>
  <div class="scope-root">
    This text is teal
    <div class="in-scope"><div>
  </div>
  ```

So the text in `.foo` would be `green` and the text in `.scope-root` would be the color that it inherits from the UA stylesheet.

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


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

Received on Monday, 14 October 2024 20:34:00 UTC