0Pricing
HTML Academy · Lesson

Extending Built-in Elements

Customize existing elements with the is attribute.

Two Kinds of Custom Elements

The spec defines autonomous custom elements (extending HTMLElement, used as <my-card>) and customized built-in elements (extending a specific built-in class, used as <button is="my-button">). Customized built-ins inherit built-in semantics for free.

Why Extend a Built-in?

Autonomous <my-button> gets none of the built-in <button> behavior — no Enter/Space activation, no form participation, no role="button" for assistive tech. A customized button (is="my-button") inherits all of that automatically.

All lessons in this course

  1. Defining Elements with customElements.define
  2. The connectedCallback and disconnectedCallback
  3. Observed Attributes and attributeChangedCallback
  4. Extending Built-in Elements
← Back to HTML Academy