CSS :defined Pseudo-class

The :defined pseudo-class in CSS allows you to select and style custom elements that have been defined. This is particularly useful when working with Web Components, where custom elements may not be immediately recognized by the browser until they are registered.

What Is the :defined Pseudo-class?

The :defined pseudo-class represents elements that have been registered with the browser's custom elements registry using customElements.define(). It helps differentiate between elements that are fully operational and those that are not yet defined, allowing for more precise styling and control over the user interface.

Why Use :defined?

When working with custom elements, there may be a delay between when the element is parsed and when it is defined and upgraded. During this time, the element is considered "undefined," and certain properties or behaviors may not be available. The :defined pseudo-class lets you apply styles only when the element is fully defined, enhancing the user experience by preventing incomplete or broken UI elements from displaying improperly.

Basic Usage of :defined

The syntax for using the :defined pseudo-class is straightforward:

custom-element:defined {
    /* Styles for the defined custom element */
}
Copy

Example: Styling a Defined Custom Element

Suppose you have a custom element called <my-button>:

<my-button>Click Me</my-button>
Copy

You can use the :defined pseudo-class to style it once it has been defined:

my-button:defined {
    display: inline-block;
    padding: 10px 20px;
    background-color: blue;
    color: white;
    cursor: pointer;
}
Copy

Handling Undefined Custom Elements

You might also want to style custom elements that are not yet defined to prevent them from displaying or to show a placeholder:

my-button {
    display: none;
}

my-button:defined {
    display: inline-block;
}
Copy

In this example, the <my-button> element is hidden until it is defined, ensuring that users do not see an unstyled or non-functional element.

Example with JavaScript Registration

To fully implement this, you need to define your custom element in JavaScript:

// Define the custom element
class MyButton extends HTMLElement {
    constructor() {
        super();
        // Element functionality goes here
    }
}

customElements.define('my-button', MyButton);
Copy

Using :not(:defined) to Style Undefined Elements

You can target elements that are not yet defined using the :not() pseudo-class combined with :defined:

my-button:not(:defined) {
    display: inline-block;
    padding: 10px 20px;
    background-color: grey;
    color: white;
    cursor: not-allowed;
}
Copy

This provides a fallback style or indicates that the element is loading or not yet ready.

Browser Compatibility

The :defined pseudo-class is supported in most modern browsers, including Chrome, Firefox, Edge, and Safari. However, it's always a good practice to check the latest compatibility data if you're planning to use it in production environments.

Conclusion

The :defined pseudo-class is a valuable tool when working with custom elements and Web Components, allowing developers to apply styles only when an element is fully defined and operational. By leveraging this pseudo-class, you can enhance the reliability and appearance of your web applications, ensuring a smoother user experience.