Your first custom element

Custom elements are the browser's native component model. You define a class, register a tag name, and the platform handles the rest — no compiler, no runtime, no virtual DOM.

The idea

Every custom element extends HTMLElement (or a built-in element class). You register it with customElements.define, and the browser instantiates your class whenever it sees your tag in the DOM. The connectedCallback lifecycle hook runs when your element is inserted — that's where you render.

Your assignment

1. Define a class called GreetingCard that extends HTMLElement
2. In connectedCallback, set innerHTML to greet the user — use the name attribute if present, or friend as a fallback
3. Register the element as greeting-card with customElements.define