Published at
Updated at
Reading time

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">
      /* style custom elements that are not defined yet */
      :not(:defined) {
        border: 2px solid red;
    <some-elem>Hello world!</some-elem>
      // assume that this code is loaded async
      class SomeElem extends HTMLElement {}
      customElements.define('some-elem', SomeElem);

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

Related Articles