Custom Element
A reusable element built into the browser, registered as your own HTML tag and usable with plain JavaScript or any framework.
See it
What it is
A custom element is a browser-native HTML element that you define with a class and customElements.define(), then use as a tag such as <user-card>. Its class can react when it connects, disconnects, or observed attributes change. The required hyphen keeps custom names separate from elements the HTML standard may add later.
Reach for one when a widget must run in plain HTML and across React, Vue, Svelte, or a CMS without shipping a wrapper for each. Custom elements are one part of Web Components; Shadow DOM and slots are separate browser features you can choose to use with them. GitHub runs its own site on custom elements such as clipboard-copy, and Google's Lit is the most common library for authoring them.
Gotcha: attributes are strings, while JavaScript properties can hold objects and other values. attributeChangedCallback runs only for names listed in observedAttributes, and defining the same tag twice throws. Check customElements.get() before registration in bundles that may load more than once.
Ask AI for it
Build a framework-agnostic <user-card> custom element by extending HTMLElement and registering it with customElements.define('user-card', UserCard). Render in connectedCallback, observe the name and avatar attributes through static observedAttributes and attributeChangedCallback, expose richer data through a JavaScript property, and clean up any listeners in disconnectedCallback. Create nodes with document.createElement and textContent instead of inserting untrusted strings with innerHTML, and guard registration with customElements.get('user-card').