Style Scoped

The idea of scoping styles has been desired for a long time. The idea is to write CSS without worrying it will apply to more than you want it to. You can solve this in a number of ways. A way to do it without changing any core technology is to use naming. If you name every single element with, say, a unique class name and only style with that, you are successfully scoping. That’s laborious and error-prone done by hand, but various processors can help, like CSS modules.

Core technology can change to help, too. The advent of Web Components and the shadow DOM do style scoping by virtue of an isolated DOM tree anywhere you need it. You could argue that’s heavy-handed for style scoping alone, but it’s cool it exists.

A long time ago, there was a way to do scoped styles (it even shipped for a little while and was pulled) like this:

<main>
  <div>
    <p>I'd be red in this world.<p>

    <style scoped>
      p { color: red; }
    </style>
  </div>

  <p>The scope doesn't apply to me.</p>
</main>
    Code language: HTML, XML (xml)

You can see the <style scoped> is a child of a <div> above it, so that’s where the styling would be scoped to, and the selector would only match the <p> within that scope.

I always thought that was cool!

It’s so straightforward.

I do not have an understanding of all the nuance that went into the creation and removal of this. Maybe it had bad performance. Maybe it was weird you couldn’t reference the :host or whatever. In any case, it’s not a thing and you can’t do it.

Then @scope started to become a thing in CSS, and as I write browser support is that Chrome has already shipped it. Ollie Williams has a good primer on it and I like this take:

There are two selling points of @scope: styling based on proximity and setting a lower boundary for a selector.

@scope isn’t about scoping CSS to a selector really, even though it kinda looks like that. You still have to name a class so you aren’t really buying all that much, especially with native CSS nesting shipping. But the “lower boundary” scoping is kinda neat (aka “donut scope”), and the proximity styling will be appreciated by people writing color themes. Still, I’m not incredibly jazzed about it.

But then I found out it can pretty much replicate what <style scoped> was doing! Check this!

I can just write an @scope in a style block and use it:

<div>
  <style>
    @scope {
      p {
          color: red;
      }
    }
  </style>
  <p>Only I am red.</p>
</div>Code language: HTML, XML (xml)

But I can also use the :scope pseudo class like I would use :host in a Web Component shadow DOM and even natively CSS nest from there. Pretty sweet.

So when this ships everywhere, to scope styles to some particular DOM element, even “light DOM” as it were, you can just wank in a <style> block and style from that part downwards, even limiting the lower scope. No naming, no libraries, no processing.