I love working with custom elements for all kinds of things, but sometimes I just want to hide stuff until it is loaded or do something else with it in CSS.

A simple solution looks like this:

framework-button:not(:defined) {
   display: none
}

Put that in a <style> tag in the HTML and the button will just appear once it's loaded.

But with larger frameworks, this becomes really annoying. Sometimes you can get away with simply selecting :not(:defined), but that's not always viable.

An obvious (at least to me) fix: CSS needs a name prefix selector, so you can just do this

framework-*:not(:defined) {
   display: none
}

It's not like this would be an entirely new thing. We can already kind of do this with attribute selectors.

And I'm sure allowing splits only at - in an element's name would make it reasonably easy to implement this effectively in browsers too.

What do y'all think? Would this be useful? Are there easier solutions that already work?