CSS Scope is here!

...and it's as amazing as you might think. 🤩

Add this together with inline <style> blocks and you have an elegant solution to what Tailwind wanted to solve with the grace of a rusty axe.

<article>
  <style>
    @scope to (main) {
      :scope {
        /* This will style the article itself */
      }

      /* 
       * any rule in here will only affect things within this specific article
       * but nothing inside the main element...
       */
    }
  </style>

  <!-- some basic elements -->

  <main> 
    <!-- imagine rendering some other template/component into here --> 
  </main>

  <!-- more generic stuff -->
</article>

Styling a components container

And as a bonus, when you write a :style selector within main now, you can effect the main element containing the style block without knowing about the outer structure.

<!-- this is your child component -->
<style>
@scope {
  :scope {
    /* this will effect whatever element will be the container for this */
    display: flex;
    flex-direction: column;
  }
}
</style>

<section>...</section>
<section>...</section>
<section>...</section>
<section>...</section>

Caveat: The border of the donut

The one uglyness I found happens when you want to style the donut element (<main> in the example here).

In this case you'd either need a second scope without the donut hole:

@scope to (main) {
  /* our usual stying*/
}
@scope {
  /* without the "hole" we can now style main */
  main {
    flex: 1;
  }
}

or have a slightly awkward donut selector:

@scope to (main > *) {
  /* now the hole 'begins' only at main's children, so we're save to do this: */
  main {
    flex: 1;
  }

  /* our other usual styles go here ... */
}

Conclusion

So can we now finally retire that slightly damp wind comming from somebodies tail? 😉