: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.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 13 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles