What is HTML “is” attribute?

Question

I have seen it a lot here and there, yet I could find any description or documentation about it!

Example:

Answer 1

The is keyword is part of the W3C Draft spec for creating custom HTML elements with custom behavior.

In specific, is is used when extending a built-in element like <input>, <button> or <table>. For example, you could have a plastic-button element that extends <button> to provide some fancy animation when clicked.

You'd add the button to the page like this:

<button is="plastic-button">Click Me!</button>

Before you do this, you need to register plastic-button as a custom HTML element like this:

customElements.define("plastic-button", PlasticButton, { extends: "button" });

This references a PlasticButton Javascript class, which would look something like this:

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

It'd be great if you could say <plastic-button>Click Me!</plastic-button> instead of <button is="plastic-button">Click Me!</button>, but that would create an HTMLElement with no special behavior.

If you are NOT extending a built-in HTML element like <button> and instead creating a new element that extends the generic HTMLElement, you can use the <plastic-button> syntax. But you won't get any of <button>'s behavior.

This is part of the W3C Draft spec for Web Components' Custom Elements: http://www.w3.org/TR/custom-elements/#type-extension-semantics

Answer 2

You use the is attribute to markup a customized built-in element, a custom element that extends a built-in element.

There are two types of custom elements:

Autonomous custom elements are standalone — they don’t inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <popup-info>, or document.createElement("popup-info").

Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property). For example <p is="word-count">, or document.createElement("p", { is: "word-count" }).

_{https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements}

Answer 3

In 2020:

The is attribute is now part of HTML spec in the Custom Elements specification.

It follows the polymer spec and is documented for developers at mdn.

Only Edge still hasn't updated to include this spec but it its new chromium-based implementation, in 2020, its availability may become widespread.

---

In 2017:

There is no is attribute in HTML.

It is a proposed extension that appears in the Custom Elements specification (which evolved from the Polymer spec mentioned below).

It allows you to say that an existing, standard element is really a custom element.

<button is="fancy-button" disabled>Fancy button!</button>

… which allows for backwards compatibility. If custom elements are not supported by the browser (the spec is still a draft and has very limited browser support) then it will fall back to the default behaviour.

---

In 2014:

It is not HTML. It is an expando-attribute for Polymer custom elements.

If you used extends to create a Polymer element that derives from an existing DOM element (something other than HTMLElement), use the is syntax

Answer 4

It is part of the W3C Draft spec for Web Components' Custom Elements.

Latest Working Draft: http://www.w3.org/TR/custom-elements/#type-extension-semantics

Latest Editor's Draft: http://w3c.github.io/webcomponents/spec/custom/#type-extension-example

Answer 5

It's part of web components spec for Custom Elements. So it's HTML.

Frameworks like Vue.js also supports is atribute in compliance with web components standard.