What is the point of the “is” syntax when extending elements in web components?

Question

In web components, to register an element you simply type:

var XFoo = document.registerElement(\'x-foo\', {
  prototype: Object.create(HTMLElement.prototype)         


        

Answer 1

Answer 1 The apparent duplication is because your example is very simple. In the real virtual life, you would provide a different prototype to registerElement.

Example with a custom button that will display a popup when clicked:

//Custom method
function callback ()
{
    console.log( this + " {created}" )
    this.onclick = function ( event )
    {
        alert( this.id + " " + this.value )
    } 
}

//Type Extension
var newProto = Object.create( HTMLButtonElement.prototype )
newProto.createdCallback = callback
var XFooButtonExt = document.registerElement( 'x-foo-button', {
    prototype: newProto,
    extends: 'button'
} )

newProto is different than HTMLButtonElement's prototype.

With the following HTML code:

 Hello 

A click on it will display "Hello World" in a popup.

---

Answer 2 The extends: 'button' is a semantic indication that tells the browser that the new prototype provided implements the HTMLButtonElement interface. That's why it's easier to start with an object that inherits from HTMLButtonElement. Instead you could start with an HTMLFormElement prototype but you would have to reimplement all the properties and methods of the HTMLButtonElement interface.

If not, the element behaviour will be incorrect. In the above example, if you replace a line by:

var newProto = Object.create( HTMLFormElement.prototype )

... the click on it will fail because the property value is not implemented in a

element.

The property id is always correct because it is provided by the HTMLElement interface, implemented by every elements (including ).

Note that you could add the missing properties, and link them to their attribute in the attributeChangedCallback method.

---

Answer 3 You are correct. This maintains backward compatibility with old browsers that will ignore the second argument, still being able to create a normal element (a standard in your example).

---

Answer 4 There are 2 different concepts behind the Custom Elements paradigm:

1. Type Extensions (Customized Built-in Elements) if you want to extend a standard HTML element.
2. Custom Tag (Autonomous Custom Elements) if you want to define custom elements with new names.

Both are defined with the same method registerElement. The extends/is option permits you to choose one of them.

The is syntax works only with Type Extensions and is therefore always associated with the extends option.

With Type Extensions, you keep all the semantics of the element you extend: CSS styles, built-in behaviour (interfaces), accessibility features. Backward compatibility is another benefit of this syntax.

With Custom Tags, you loose the semantics and your custom element is expected to implement only the HTMLElement interface, with no built-in style or behavior.

Update: the next example (for Chrome and Opera) illustrates the difference between Type Extension and Custom Tag.

//Method
function callback() {
  this.textContent = this //Get the HTML semantics
  this.onclick = function(event) {
    try {
      var output = this.id + " "
      output += this.name        //works only with 

} catch (e) { output += "a generic element" } alert(output) } } //Type Extension var newProto = Object.create(HTMLButtonElement.prototype) newProto.createdCallback = callback var XFooButtonExt = document.registerElement('x-foo-button', { prototype: newProto, extends: 'button' }) //Custom Tag var newProto2 = Object.create(HTMLButtonElement.prototype) newProto2.createdCallback = callback var XFooButtonCust = document.registerElement('x-foo-button-2', { prototype: newProto2, })

  
  



  
Type Extension
  

Type Extension

Custom Tag

Custom Tag