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