What is an ‘`is` value’ of a DOM element node?

Question

While idly browsing the DOM specification, I came upon this passage:

Elements have an associated namespace, namespace prefix, local name, custom element state, custom element definition, is value. When an element is created, all of these values are initialized.

Looking at other parts of the specification, I learned that it is apparently supposed to be a string value or null. However, I have not been able to find out what is it actually supposed to be used for.

Of what use is this concept?

Answer 1

The is attribute usage relates to native web components (think react, just native to the HTML spec).

It allows you to create a custom component that behaves like a native HTML component as explained in the MDN docs:

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Constructor contents omitted for brevity
    // …
  }
}

// Define the new element
customElements.define("word-count", WordCount, { extends: "p" });

<p is="word-count"></p>

It is however not implemented in Safari browser as Apple has principled objections to its use as discussed in the thread here.