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

后端未结

关注

 1  943

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

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


                      
              相关标签:


      
      
        
          1条回答        

        
                         				            
            
           
            
                              
                
              
              
                
                  星月不相逢        
                
              
                            
                2020-12-05 20:04
              
            
            
                                                                       
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:

<button is="x-foo-button" id="Hello" value="World"> Hello </button>


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 <form> element. 

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

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 <button> in your example).



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


Type Extensions (Customized Built-in Elements) if you want to extend a standard HTML element. 
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 <button is=...>
    } 
    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,
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Custom Elements</title>
</head>

<body>
  <h3>Type Extension</h3>
  <button is="x-foo-button" id="I'm" name="a button">Type Extension</button>
  <h3>Custom Tag</h3>
  <x-foo-button-2 id="I'm" name="a button">Custom Tag</x-foo-button-2>
</body>

</html>



                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
          	          
                             
        
        
          
            
            
              
              
            
    


                                 
              
            
                          
    

        
         
                验证码
                
                  
                
                
                   看不清?
                
              
                                  
                    
   
                 
             
              提交回复