### Define a custom element with CSS

Source: https://github.com/mdn/web-components-examples/blob/main/defined-pseudo-class/index.html

Styles a custom element when it is defined. Use this to apply styles only after the element's constructor has been registered.

```css
custom-element:defined {
  background-color: wheat;
  border-color: black;
  color: black;
}
```

--------------------------------

### Show loading message for undefined custom elements with CSS

Source: https://github.com/mdn/web-components-examples/blob/main/defined-pseudo-class/index.html

Uses the ::before pseudo-element to display a 'Loading...' message for custom elements that are not yet defined. The message is removed once the element is defined.

```css
/* show loading message */
custom-element:not(:defined)::before {
  content: "Loading...";
  position: absolute;
  inset: 0 0 0 0;
  align-content: center;
  text-align: center;
  font-size: 2rem;
  background-color: white;
  border-radius: 1rem;
}

/* remove the loading message */
custom-element:defined::before {
  content: "";
}
```

--------------------------------

### CSS for Expanding List Component

Source: https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/index.html

Styles the expanding list component, including list item markers and states for open/closed items. Used for visual presentation and interactive behavior.

```css
ul {
  list-style-type: none;
}

li::before {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
  content: "";
}

.open::before,
.closed::before {
  background-size: 1rem 1rem;
  position: relative;
  top: 0.25rem;
  opacity: 0.3;
}

.open::before {
  background-image: url(img/down.png);
}

.closed::before {
  background-image: url(img/right.png);
}

.closed .closed::before,
.closed .open::before {
  display: none;
}
```

--------------------------------

### Define a custom element using JavaScript

Source: https://github.com/mdn/web-components-examples/blob/main/defined-pseudo-class/index.html

Defines a custom element named 'custom-element' when a button is clicked. This code registers the element with the browser, making it available for use and styling.

```javascript
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  customElements.define("custom-element", class extends HTMLElement {});
  btn.remove();
});
```

--------------------------------

### HTML Structure for Expanding List

Source: https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/index.html

Provides the nested unordered list structure for the expanding list web component. This HTML defines the hierarchy that the CSS styles and JavaScript (if any) will interact with.

```html
*   UK
    *   Yorkshire
        *   Leeds
            *   Train station
            *   Town hall
            *   Headrow
        *   Bradford
        *   Hull
*   USA
    *   California
        *   Los Angeles
        *   San Francisco
        *   Berkeley
    *   Nevada
    *   Oregon

*   Not
*   an
*   expanding
*   list
```

--------------------------------

### Style undefined custom elements with CSS

Source: https://github.com/mdn/web-components-examples/blob/main/defined-pseudo-class/index.html

Styles a custom element when it is not defined. This is useful for showing a loading state or placeholder before the element is registered.

```css
custom-element:not(:defined) {
  border-color: grey;
  color: grey;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.