`:defined` - Selector CSS

:defined

Summary of characteristics of the `:defined` selector

Quick description

Pseudo-class targeting defined elements (variable concept depending on the language).

Status

Standard

W3C Module

Selectors

References (W3C)

Selectors Level 4

Document status: WD (Working Draft)

Description of the `:defined` pseudo-class.

:defined targets elements that are defined. In HTML, all standard elements are considered defined. But this is not the case for custom elements because they must first execute their define() method.

Note: Custom HTML elements must contain a hyphen (minus sign) in their name to avoid any possible confusion with current or future HTML tags.

Let's take an example: a custom element that displays the current date. Let's call it x-calendar (since the name must contain a hyphen). Now let's write the Javascript class xCalendar that will be associated with it. This class declares a shadow element that will be the container for the date, and a cal element of type span. The constructor takes care of calculating the date and extracting the day, month, and year from it.


	class xCalendar extends HTMLElement {
	   shadow = this.attachShadow({ mode: "open" });
	   cal =  document.createElement('span');
	
	   constructor() {
	      super();
	      var toDay = new Date();
	      this.cal.innerText = (toDay.getMonth()+1)+'-'+toDay.getDate()+'-'+toDay.getFullYear();
	      this.shadow.appendChild(this.cal);
	   }
	}

The component is ready, all that remains is to define it using the define() method of the customElements object. We could have done this right after defining the class, but to make the example clearer, we have created a function that will be called by the button below. In reality, the component may take some time to update (accessing a database, complex calculations, waiting for a password, etc.). This is what we simulated by calling the function with a button.


	function define() {
	   customElements.define("x-calendar", xCalendar);
	}

Finally, somewhere on the page, we insert the custom component.


	x-calendar1/1/1900/x-calendar

There you go, we now have a component that, when the page loads, is undefined, and will be set by clicking the button.

1/1/1900

With the styles we applied, the component is hidden until it is defined. This does not prevent applying some formatting styles to it. When :defined is activated, the component is displayed.

Browser compatibility with `:defined`.

Column 1

Support by browsers for the pseudo-class :defined, which targets elements that are already defined, that is, all standard elements and custom elements that have executed their define() method.

:defined
pseudo-class

Estimated overall support.

96%