Zell LiewFollowBetter Programming--ListenShareI was excited about Scoped Css when frameworks like React and Vue introduced them a few years back.As I began trying Scoped CSS out for myself, I was disappointed and felt it didn’t live up to its hype.But after more tries, I’m happy to announce that Scoped CSS is indeed useful. You only have to realize its limitations and what to do when you face them.Before you continue further, I want to make sure we’re talking about the same thing.In this article, I’m talking about Scoped CSS, which can be found in major frameworks like React, Vue, Svelte, and Astro.I’m not talking about the native CSS :scope. You can find out more about that here.Scoped CSS was one of the biggest features that frameworks provided us with. It promises to restrict the scope of your CSS so your CSS would not leak into other components.The limitations of Scoped CSS are as follows:Now, let’s see what I mean by these limitations.From my experience, Scoped CSS in all frameworks behaves in the same manner. So, I’m going to use Svelte here to illustrate my point.Let’s say I imported a SVG component, and I'd like to style the SVG from a Menu component. Here’s what that code looks like:The SVG component contains the SVG and nothing more.If I try to style the SVG from the Menu component, the styles will not be applied.And I’m forced to use the global or the global selector to style this SVG.The global attribute negates scoped CSS and allows the entire style block to act like Normal CSS.Using the global attribute isn't a great practice because you might as well write Normal CSS instead.By the way, if you use Astro, the global attribute is a directive and not an attribute.The :global() selector allows you to expose the values wrapped inside it to the global scope.If you want to keep .Menu in the local scope, you can use :global only on the rest of the selectors.This is nice.But there’s a huge problem.The global selector cannot be used in the middle of the selector chain. So this doesn't work.Because the global selector cannot be used in the middle of the selector chain, nesting doesn't work as well.This gives Scoped CSS a big minus point in my world.Scoped CSS is also limited when you have to style slot content.For this, let’s say we have an component, and we are going to pass the contents through a