Roma’s Unpolished Posts

CSS Scope Issues

Published on:
CSS Scopes 3, CSS Nesting 4, CSS 37
Current music:
Mice Parade — Two, Three, Fall
Current drink:
Lapsang Souchong tea

A week ago, a CSS @scope article by Miriam Suzanne was published at 12 Days of Web (curated by Stephanie Eckles).

This article did clarify a few things for me, but also made me think of one potential usage of the :scope pseudo-class: “storing” the scoping root’s selector as a reusable entity, covering the use case which is available in some CSS preprocessors: @at-root in Sass and root reference in Stylus. We don’t have anything like this with native CSS nesting, so the possibility to use scopes in this way seemed like a really neat feature.

However, when exploring this use case, I stumbled upon a few issues, one of which was the way Chromium implemented the :scope inside the :is(). I did open a PR to Web Platform Tests adding a test for this.

It is from a comment in this PR by Matthieu Dubet that I first heard about the @scope becoming stable in WebKit!

Of course, I couldn’t help myself from going and exploring how the @scope works in Safari Technology Preview.

Some things that I did found were nice (my use case with :is(:scope *) did work, unlike in Chromium!), but also some things did not work as I expected. However, my expectations for these are based more on the current Chromium implementation, rather than the specs — I think a lot of these are in the “gray area”, not yet exlicitly defined in the specs (or explained there in a not the most obvious way, allowing room for an implementation difference between Chromium and WebKit right now).

Some more explorations and thinking later, I did open four issues in CSSWG. I will not copy what I did write there here, but will invite you to read them yourself, and participate in case you’ll have something to contribute! Here they are:

I hope these issues will be clarified in one way or another, allowing me to be more sure when writing the follow-up WPT tests for the @scope issues I discovered.

Please share your thoughts about this on Mastodon!