Jens Oliver Meiert

Use my latest work: latest tech book · latest non-tech book · latest optimization tool · latest defense tool

HTML Concepts: Customized Built-In Elements

Published on Mar 25, 2023 (updated Jul 2, 2023), filed under , . (Share this post, e.g., on Mastodon.)

HTML allows to define custom elements, elements which enable authors to “build their own fully-featured DOM elements.”

One special type of custom element is the customized built-in element… a custom element built on an existing HTML element. This allows for reuse and extension of functionality already available.

The way customized built-in elements work is essentially this:

  1. Pick an element to be built on and extended.

  2. Define a class for it, similar to an autonomous custom element (or as MDN Web Docs shows).

  3. Have that class extend the respective element (like HTMLButtonElement for a button element).

  4. For the define method, also specify an extends option (like extends: "button").

  5. To use the new customized built-in element, add an is attribute to the customized element in question, with the name of the customized element (like <button is="example-action">Action</button>).

It’s useful to know that to ensure future-compatibility, this only works for elements defined in the HTML specification. That is, currently undefined elements but also deprecated elements cannot be extended like this, which includes legacy elements like isindex, keygen, or nextid (sure, elements everyone has been waiting to customize!).

Yet in general, that’s it—though things become more interesting depending on the functionality to be added.

Customized built-in elements enjoy broad support, but are not currently supported by every browser. Follow the post thread on Mastodon for more details, or to share your information.

Have a look at other concepts—or review the summaries of the first eight concepts over at Frontend Dogma.

About Me

Portrait sketch of Jens Oliver Meiert.

I’m Jens (long: Jens Oliver Meiert), and I’m an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, Frontend Dogma). Stay in touch.