Customized built-in elements
Customized built-in elements are HTML elements that extend built-in elements using the is attribute, to add new behaviors that you define. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
Customized built-in elements are HTML elements that extend built-in elements using the is attribute, to add new behaviors that you define. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 67 | 79 | 63 | | 67 | | |
| DOM API | ||||||
| Customized built-in element support | 67 | 79 | 63 | | 67 | |
Syntax
class FancyButton extends HTMLButtonElement {
constructor() {
super();
this.style.background = 'linear-gradient(#66f, #33c)';
this.style.color = '#fff';
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });
// <button is="fancy-button">Click</button>Live demo
Extended button
Define a customized built-in button and enhance it with default styles.
Counter button
Add behavior to a built-in button while preserving native button semantics.
Enhanced menu trigger
Apply reusable styling and labels to a built-in button variant.
Use cases
Use Customized built-in elements
Use Customized built-in elements when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Customized built-in elements to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test Customized built-in elements in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure Customized built-in elements supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features