Hiding a Custom Element Until It Gets Defined

Published on February 5, 2021

Until the time a custom element gets defined using customElements.define() method, it is basically an unknown element. However browser considers this unknown element as a potential custom element that may be defined later (this is because of the dash (-) character present in the custom element's tag name).

The :defined CSS pseudo-class selects elements that have been defined. This selector along with :not selector can be used to style undefined custom elements.

This can be useful to hide the custom element until the defining Javascript gets loaded.

/* CSS until custom element is unregistered */
input-plus-minus:not(:defined) {
	display: none;

/* CSS when custom element gets registered */
input-plus-minus:defined {
	display: block;

In this Tutorial