HTML is Attribute

HTML is Attribute

The HTML is attribute identifies a standard HTML element as a registered customized built-in element, allowing the element to retain its built-in behavior while adding functionality defined with JavaScript.

Global Attribute

The is attribute is a global attribute used to identify a standard HTML element as a customized built-in element. Although it can be specified on HTML elements, it only provides customized built-in behavior when its value identifies a custom element that has been registered for that element type.

How the is Attribute Works

A customized built-in element extends an existing HTML element rather than creating an entirely new element. For example, a custom element can extend the behavior of a standard <button> while retaining the built-in semantics and behavior of a button.

<button is="special-button">Click Me</button>

The custom element must be defined with JavaScript using customElements.define(). The extends option identifies the standard HTML element being extended.

is Attribute Values

The value of the is attribute is the name of the customized built-in element.

<button is="special-button">Click Me</button>

Custom element names must follow the naming requirements for custom elements, including containing a hyphen. The name used by is must correspond to a customized built-in element registered for the type of element on which the attribute appears.

Defining a Customized Built-In Element

To create a customized built-in element, define a JavaScript class that extends the interface associated with the standard HTML element.

class SpecialButton extends HTMLButtonElement {
  constructor() {
    super();
  }
}

customElements.define("special-button", SpecialButton, {
  extends: "button"
});

The registered name can then be used as the value of the is attribute on a <button> element.

<button is="special-button">Click Me</button>

The element remains a button while gaining the behavior supplied by the SpecialButton class.

Customized Built-In vs. Autonomous Custom Elements

Customized built-in elements and autonomous custom elements are two different types of custom elements.

Common Mistakes

Do not use the is attribute by itself and expect it to add behavior. The customized built-in element must first be defined and registered with JavaScript.

Make sure the element type matches the element specified by the extends option. A customized built-in element registered with extends: "button" must be used with a <button> element.

Do not use is for an autonomous custom element. Autonomous custom elements use their registered custom element name directly as the HTML element name.

Customized built-in elements do not have consistent support across current browsers, so check browser compatibility before relying on them.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The is global attribute, used with customized built-in elements, has limited availability because customized built-in elements are not supported consistently across current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the is Attribute

The example defines a customized built-in button and uses the is attribute to associate the standard <button> element with the custom definition. The example will only provide the customized behavior in browsers that support customized built-in elements.

Summary

The HTML is attribute identifies a standard HTML element as a registered customized built-in element. The custom element is defined with JavaScript by extending the appropriate built-in element interface and registering it with customElements.define() and the extends option. Browser support remains limited, so customized built-in elements should not be assumed to work in every browser.