HTML is Attribute

The is attribute specifies that an element will behave like a custom element. Custom elements are classes defined in JavaScript.

Example

#

An is attribute on a <button>.
This button is (behaves as) a custom-button which is a class with a pre-defined click event handler.

<button is="custom-button">What am I?</button>

<script>
  class CustomButton extends HTMLButtonElement {
    constructor() {
      super();

      this.addEventListener("click", () => {
        alert("I am a 'custom-button'!");
      });
    }
  }

  customElements.define("custom-button", CustomButton, { extends: "button" });
</script>

Code explanation

In JavaScript a new class name is defined that includes an click handler.

This class is registered as a custom element.

The is value is extended as a button using the Javascript class object.

The <button> on the first line has an is attribute which makes it behave as a Javascript object.


Using is

The is attribute specifies that a standard HTML element should behave like a custom built-in element.

Custom built-in elements is a feature of Web Components in which custom elements are created that encapsulate certain functions (behavior).

The is attribute only has an effect when the specified custom element is defined on the same page and extends the same element type it is applied to (in the above example a button).

Note:  The is attribute is a global attribute that can be applied to any tag.

Note:  Not all browsers support the is attribute.


Syntax

<tag is="value" />

Values

#

Value Description
value String that is the name of a custom element.

Browser support

Here is when is support started for each browser:

Chrome
67.0 May 2018
Firefox
63.0 Oct 2018
Edge
Not Supported
Opera
55.0 Aug 2018
Safari
Not Supported

You may also like



Guides