Styles to make element transparent if it is undefined or contains undefined elements (with a 1s timeout)

[LeaVerou]

NudeElement could inject the following in an element’s shadow DOM to minimize FOUCE:

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Show custom elements only after they're registered */
:host(:has(:not(:defined))), /* light DOM */
:host:has(:not(:defined)) /* shadow DOM */ { 
  /*
   * if an element gets defined earlier than 1s, the animation stops applying so it just appears (no fade)
   * If it takes somewhere between 1s and 1.2 s, then you may get an interrupted fade
   * If an element takes longer than 1s to get defined, it fades in over 200ms
   */
  animation: 200ms 1s wa-fade-in both;
}

We could also inject something similar to globalStyles, with a selector of :where(:not(:defined)).
In fact, we could add these to adoptedStylesheets, that way no need to modify any actual DOM.