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

CSS really needs some form of hard isolation that allows widgets or templates to avoid getting any styles from above, while remaining in the document. 

Shadow-DOM is somewhat capable of this, but if all you care about is **CSS isolation**, you get the _really annoying_ side effect of **JavaScript isolation** as well! 

My use case is bad old wordpress themes, where I want to deploy a template to many sites without their themes affecting anything. I went the declarative shadow DOM route, but this breaks a lot of SEO tools as they often use JS to target elements on the page making them invisible to the tools.

You can make a _workable_ system with `all:revert;` but it requires applying it to all children inside of an element. This has a lot of side effects that are not desirable, like if an element has its own inline style, that gets reverted. You also want to avoid resetting things like svg elements. Also to get past parent !important styles, it needs to be important, which then means everything inside your target element needs to be important. It's just way more complicated than it ought to be to ensure some element looks the way you want it to.

```
#template-blog {
  &,
  :where(*:where(:not(svg, svg > *))) {
    all: revert !important;
    box-sizing: border-box;
  }

  @import "tailwindcss/preflight.css";
  @import "tailwindcss/theme.css" important;
  @import "tailwindcss/utilities.css" important;

  ... Custom styles (all need to be important)...
}
```

It would just be so much simpler if there was a way to put up a wall at a target element and have the browser just discard anything except css variables from coming through (like shadowdom css isolation, but without it becoming its own document!)

```
#template-blog {
   all: discard;
}

Theres been a lot features added for forms of isolation - @scope, @layer, shadowdom which are all great when your building stuff from scratch and have full control over everything but I think have overcomplicated the CSS isolation problem people have been complaining about for the last 2 decades.

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


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

Received on Tuesday, 12 May 2026 16:48:07 UTC