How does scope CSS work?

[@erikslorenz]

I think the post react era will be mvc ish with most of the frontend being component based templating that uses pure scoped css and htmx-like partial updates. The reactivity libraries will actually be used as a regular library when you need it. It’s already going that way. These recent css and browser api improvements solve so much of what front end frameworks have been trying to do for most sites and apps

[@CjDocious]

Maybe I missed it but is there some way to utilize this to stop inheritance into your components for a site you don't own/cant change the css of? For instance say you have some "widgets" that others can embed on their site. The owners of that site can have all kinds of ugly css and often bleed into the widget. Is there some way in the widget to say "don't inherit anything above me"? Similarly adding a new Micro Frontend to a bloated CSS legacy site. You can make the MFE look great on its own, but as soon as you go to render that MFE in the content area of the legacy site with all kind of un-scoped p, button, whatever css rules, the MFE inherits all that and visually blows up. Is there some way to say at the top level of the MFE "dont inherit any css rules above me"

[@robert-m6u7d]

I like this, but what about html size when inline style tag is used a component library? Basically each instance has the same style tag, which doesn’t really make it useful. Also, instead of using tags as selectors, the better approach would be to use slots.

[@syntaxfm]

You would still use selectors for the cascade but for scoped styles specifically it allows you to keep them inside the component exclusively

[@m12652]

So what does @scope do that nested CSS can't?

[@syntaxfm]

Nested css is just simplifying narrowing selectors. @scope allows you to prevent the styles from leaking outside of the scope.

[@m12652]

@@syntaxfm I get how it works and its a nice step forwards, but given I work with components, mostly with svelte, keeping css properly contained isn't really an issue any more (for me). It's even quite pleasant, especially combined with Tailwind etc. For me most of the scenarios where it would have really helped don't really occur that often any more and when they do they're easier to either debug or code around. Funny enough... about 3 seconds after sending my comment you guys pretty much answered my question... I should have deleted it 🙄

[@syntaxfm]

It does nothing that Svelte components can't do for you for sure. But if you use most other stacks it can give you that lovely scoping control.

[@m12652]

@@syntaxfm Svelte does rock