I was really excited about Scoped CSS a couple of years back when frameworks like and introduced them. React Vue As I began trying Scoped CSS out for myself, I was disappointed and I felt it didn’t live up to its hype. But after more tries, I’m happy to announce that Scoped is indeed useful. You only have to realize what its limitations are and what to do when you face these limitations. CSS I’m not talking about the native CSS :scope 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 . You can find out more about that . :scope here The premise of Scoped CSS 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… You cannot style children components You cannot style slot content Now let’s see what I mean by these limitations. You cannot style children components 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 component and I’d like to style the SVG from a component. SVG Menu <script>
  import SVG from './SVG.svelte'
</script>

<div class="Menu">
  <SVG />
  <span>Menu</span>
</div> The component simply contains the SVG and nothing more. SVG 
<svg>...</svg> If I try to style the SVG from the component, the styles will not be applied. Menu 
<style>
  .Menu svg path {
    stroke: red;
  }
</style> And I’m forced to use the or the selector to style this SVG. global global 
<style global>
  .Menu svg path {
    fill: red;
  }
</style>


<style>
  :global(.Menu svg path) {
    fill: red;
  }
</style> The Global Attribute The global attribute negates scoped CSS and allows the entire style block to act like Normal CSS. <style global>
  .Menu svg path {
    fill: red;
  }
</style> Using the attribute isn’t a great practice because you might as well write Normal CSS instead. global By the way, if you use Astro, the attribute is a directive and not an attribute. global <style is:global>
  …
</style> The Global Selector The selector allows you to expose the values wrapped inside it to the global scope. :global() <style>
  :global(.Menu svg path) {
    fill: red;
  }
</style> If you want to keep in the local scope, you can use only on the rest of the selectors. .Menu :global <style>
  .Menu :global(svg path) {
    fill: red;
  }
</style> This is nice. But there’s a huge problem. The selector cannot be used in the middle of the selector chain. So this doesn’t work. global <style>
  /* These don’t work */
  .Menu :global(svg) path { … }
</style> Because the selector cannot be used in the middle of the selector chain, nesting doesn’t work as well. global <style lang="“scss”">
  /* This doesn’t work */
  .Menu :global(svg) {
    path { … }
  }
</style> This gives Scoped CSS a big minus point in my world. You cannot style slot content 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 . <Article> <slot> <article class="Article">
  <slot />
</article> We’ll use like this. <Article> <script>
  import Article from './Article.svelte'
</script>

<article>
  <h2>This is a header</h2>
  <p>This is a paragraph</p>
</article> If you try to style the slot content from with Scoped CSS, you’ll realize it doesn’t work. Article <article class="Article">
  <slot />
</article>

<style>
  h2 {
    color: blue;
  }
  p {
    color: red;
  }
</style> You need to use the attribute or the selector instead. global global Styling Slot Content You can use selectors or the global to style slot content. global attribute In this case, let’s go with selectors. global Here’s how I would style the slot content. <article class="Article">
  <slot />
</article>

<style lang="scss">
  article {
    :global(h2) {
      color: blue;
    }
    :global(p) {
      color: red;
    }
  }
</style> When you use selectors to style slot content, pay attention to these points: global : must be written for every selector you wish to target. If you have to use a large number of selectors, it may be worthwhile to write normal CSS instead: One global global : should come AFTER a selector ( in this case). If doesn’t come after a selector, you’ll be writing CSS into the global scope which is probably not what you want. Two :global article :global If you did what I just mentioned, your selectors should look somewhat like this: Wrapping Up Scoped CSS is a great future. Scoped CSS can be frustrating to use when you don’t know what its limitations are. Once you know the limitations, you will be able to use Scoped CSS to its fullest potential. Further Reading — this explains why I used title cases for CSS classes. Camelcase CSS How Svelte scopes component styles Scoped Styles in Astro Native CSS :scope Originally published . here Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.

zlFetch now supports FormData Making Data Handling Seamless!

Understanding the Limitations of Scoped CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

Adding a Headless CMS to Astro in 3 Steps

An Intro to the Astro Framework: Benefits and Drawbacks

Creating an Astro Site: Add Lucide Icons to Astro

How to Building Fancy List Items in Astro

Implementing Dynamic Tags in Astro

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

Adding a Headless CMS to Astro in 3 Steps

An Intro to the Astro Framework: Benefits and Drawbacks

Creating an Astro Site: Add Lucide Icons to Astro

How to Building Fancy List Items in Astro

Implementing Dynamic Tags in Astro

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps