HTML Concepts: Customized Built-In Elements
Post from March 25, 2023, filed under Web Development (feed).
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:
Pick an element to be built on and extended.
Define a class for it, similar to an autonomous custom element (or as MDN Web Docs shows).
Have that class extend the respective element (like
definemethod, also specify an
To use the new customized built-in element, add an
isattribute to the customized element in question, with the name of the customized element (like
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
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 ten concepts over at Frontend Dogma.
I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
Maybe this is interesting to you, too:
- Next: Highlights from “The Protestant Ethic and the Spirit of Capitalism” (Max Weber)
- Previous: Website Optimization Measures, Part XVIII
- More under Web Development, or from 2023
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.