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?
SOCIAL SHARE CARD GENERATOR