:defined can be used to target not yet defined custom elements
Written by Stefan Judis
- Published at
- Updated at
- Reading time
- 1min
This post is part of my Today I learned series in which I share all my web development learnings.
Today I learned that there is a :defined pseudo class in CSS. With a little bit of CSS magic using :not(:defined) one could style custom elements that are currently loaded. I love that!
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* style custom elements that are not defined yet */
:not(:defined) {
border: 2px solid red;
}
</style>
</head>
<body>
<some-elem>Hello world!</some-elem>
<script>
// assume that this code is loaded async
class SomeElem extends HTMLElement {}
customElements.define('some-elem', SomeElem);
</script>
</body>
</html>
If you want to check the spec definition of :defined is rather light though. 😆
And if you want to see the selector in action I tweeted a short video showing it.
If you enjoyed this article...
Join 5.5k readers and learn something new every week with Web Weekly.
Reply to this post and share your thoughts via good old email.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.