Artboard 16Google Sheets iconSwift icon
Published at
Updated at
Reading time
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">
      /* 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.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.

Related Topics

Related Articles