Web Components & Shadow DOM

:defined {
  display: block;
}

:not(:defined) {
  display: none;
  opacity: 0;
}

To check if a variable is defined
To style elements that have been successfully defined as custom elements
The :defined pseudo-class is used to: 1) Style custom elements that have been successfully defined and registered, 2) Hide undefined elements to prevent flash of unstyled content, 3) Create smooth transitions as elements become defined, 4) Handle progressive enhancement in Web Components. This is particularly useful for managing the initial render of custom elements.
To verify DOM readiness
To check browser support