Custom Elements

ELI5 — The Vibe Check

Custom Elements let you define your own HTML tags that the browser recognizes as first-class citizens. Want a tag? Define a class, register it, and boom — it works in HTML like any native element. You're basically expanding the HTML spec for your own project.

Real Talk

Custom Elements is a Web Components API for defining new HTML elements. Using customElements.define(), you register a JavaScript class that extends HTMLElement, with lifecycle callbacks for connection, disconnection, and attribute changes. Names must contain a hyphen to avoid conflicts with native elements.

Show Me The Code

class FancyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button class="fancy">${this.getAttribute('label')}</button>`;
  }
  static get observedAttributes() { return ['label']; }
}
customElements.define('fancy-button', FancyButton);

When You'll Hear This

"Custom Elements give us framework-agnostic components that work in any HTML page" / "The hyphen requirement in custom element names is annoying but prevents clashes"