Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
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 14 days ago.

Related Topics

Related Articles