From MDN:

It [@scope] allows you to define a precise scope inside which your selectors are allowed to target elements.

As of writing, @scope is supported in modern Chrome and Safari versions while Firefox implementation is behind a flag.

Let’s say we want to add a thick green border around all the images in an <article> with the following HTML structure except for the images inside the <figure> element:

article.featured
├── aside
│   └── img
└── section.body
    ├── p
    ├── img
    ├── p
    ├── img
    ├── p
    └── figure
        ├── img
        └── figcaption

Earlier, this was quite a difficult problem to solve with just CSS assuming you couldn’t modify the DOM/HTML itself or refactor it in a substantial way. There was no way to tell CSS that we just wanted to style a specific subtree of the DOM. We would have had to do one of the following workarounds:

1. Create a very specific ruleset like article aside img, article section > img { ... } to apply the styles.
   1. Brittle as it will need constant updating whenever document structure changes.
   2. More selectors will need to be added when different substructures get added.
2. Write a less specific rule like article img { ... } and then negate the changes using article figure img { ... }.
   1. Negated declarations need to be kept up-to-date when more property-value pairs get added in the former.

This is no longer the case with the introduction of @scope. To get the desired style, we just need the following CSS:

@scope (.featured) to (figure) {
    img {
        border: 4px solid green;
    }
}

The @scope rule line above can be read as follows:

• Target every element within .featured elements
• But exclude every element within the figure elements

Within the @scope body, we narrow down to select just img elements. So altogether, we are only applying the border to img elements between .featured article and figure (exclusive) which solves the original problem.

You can see this in action here:

See the Pen blog-til-css-at-scope by Sangeeth Sudheer (@runofthemillgeek) on CodePen.

Throwback #

I ran into this scenario during my time at Amazon working on the redesign of the Prime Video X-Ray feature of the web app.

The X-Ray component was embedded within the Web Player component at the time and the structure resembled the following when initialized:

.player-container.primary
├── div.controls
│   └── button.play
├── video
└── section.xray
    ├── aside.sidebar
    ├── div.quick-view
    └── .player-container.secondary
        ├── div.controls
        │   └── button.play
        ├── video
        └── section.xray

You might be confused seeing the “player inside player” structure above. That is not a mistake. X-Ray itself had a feature called “Bonus Videos” that also rendered the same web player within a modal (thankfully, it didn’t recurse further) so the overall DOM tree looked like that.

As part of the redesign, we had to move around some of the player and X-Ray elements to appear side-by-side when toggled. We needed a way to style some of the elements that fall in the subtree between .primary and .secondary players. We couldn’t just alter the web player to solve this problem as that came under a different team and they weren’t happy with us code monkeys messing up the markup (rightfully so).

I had to be a bit clever around then to come up with a CSS workaround that targeted those specific elements and moved them around while X-Ray was visible. I remember running into the same workarounds I prescribed at the beginning of this post and I eventually ended up doing a form of the second approach of negating the styles for the .secondary bonus video player. I remember racking my brain to see if it could be simplified but styling a specific subtree simply wasn’t feasible with just CSS back then.

@scope would’ve made this a piece of cake and I hope Firefox GA’s this soon.