Limited support Use with care and provide a fallback when broad support matters.

Customized built-in elements

Note: Safari does not plan to support customized built-in elements and browser vendors are exploring alternative solutions to customizing built-ins. Check the browser compatibility section for support information.

The is global attribute allows you to specify that a standard HTML element should behave like a defined customized built-in element (see Using custom elements for more details).

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

Web Components

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
is
67
79
63
67
DOM API
builtin_element_support

Customized built-in element support
67
79
63
67
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
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.

PreviewFullscreen

Counter button

Add behavior to a built-in button while preserving native button semantics.

PreviewFullscreen

Enhanced menu trigger

Apply reusable styling and labels to a built-in button variant.

PreviewFullscreen

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