Post

THIS COMMON CSS FEATURE TANKS YOUR PERFORMANCE!!1!1! Ok, how was that for a flamebait headline? For real, though, let's talk about `@property` Do you lazy load content to improve performance? Did you know that, if your lazily-loaded CSS includes `@property`, you're causing a full dom restyle?

If you have a large DOM / heavy content / lots of features running when that happens, that can really hurt. So, what if we could have a non-global `@property` at-rule to limit the restyling to just what was loaded? frehner.me/blog/non-glo... THIS IS NOT "SCOPED" `@property`!

I don't want to change how CSS Custom Properties cascade; I don't want to "stop" the value cascade at a certain point. Don't bring the word "scope" into this! haha. I just want a non-global `@property`, that only applies to a selector, and that doesn't cause a full DOM restyle when loaded.

This would help wonderfully with lazy loading content via your framework of choice (e.g. React.lazy), and/or HTML's new `<template for="">` "out-of-order patching", etc etc I just want teams to own their own `@property` at-rules, lazy load them, and not affect the rest of the page when doing so.

Thoughts? Reactions? Also, I included a whole section of references, because there has been a lot of talk about "scoped" CSS vars, and why they can't work. And I wanted to be clear that this proposal isn't that. Haha.

Ship it. We really need to better flag these footguns.

Yeah! I’ll post an issue in the CSSWG repo soon; just wanted to see if I was crazy and/or if people would still think this can’t be shipped because of the previous “scoped” discussions

Nope! That’s cited in my blog post, and I don’t think that’s what I want. That’s “scoped”, and I don’t want “scoped”! Haha

How is “A non-global @property rule registers a CSS Custom Property for the elements its parent selector matches (and their descendants)” not scoping?

I mean, you are scoping the @property definition to that element and its subtree and usage outside the subtree has its own (or no) definition, no?