The is attribute specifies that an element will behave like a custom element.
Custom elements are classes defined in JavaScript.
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>
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.
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.
<tag is="value" />
| Value | Description |
|---|---|
| value | String that is the name of a custom element. |
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 |
