Hiding a Custom Element Until It Gets Defined

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.

<style>
/* 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;
}
</style>

<input-plus-minus></input-plus-minus>