:defined can be used to target not yet defined custom elements

Published at
Updated at
Reading time
1 min

This post is part of my Today I learned series in which I share all my learnings regarding web development.

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.

Related Topics

See null comment.