Custom Elements

"Enabling the author to define and use new types of DOM elements."

• Define new DOM elements
• Extend the API of existing DOM elements
• Bundle custom functionality into a single DOM element

Alternatives

• External frameworks

                          
  angular.module('demoApp', [])
  .directive('square', function() {
      return {
          restrict: 'E',
          compile: function(element) {
              element[0].style.border = "red 5px dashed";
              element[0].style.width = "50px";
              element[0].style.height = "50px";
          }
      };
  });
                          
                      

• Manual constructor

                          
  <square></square>
  <script>
      $('square').initSquare();
  </script>
                          
                      

Demo

API

• createdCallback
• attachedCallback
• detachedCallback
• attributeChangedCallback(name,old,new)
• :unresolved

XSquare

                  
                      <x-square></x-square>
                  
            

                  
// Prototype inheritance
var XSquarePrototype = Object.create(HTMLElement.prototype);

XSquarePrototype.createdCallback = function() {
    // Add style
    this.style.border = "red 5px dashed";
    this.style.width = "50px";
    this.style.height = "50px";
};

var XSquare = document.registerElement('x-square', {
    prototype: XSquarePrototype
});
                  
            

Example:

XRectangle

                
                    <x-rectangle></x-rectangle>
                
            

              
// Prototype inheritance
var XRectanglePrototype = Object.create(XSquarePrototype);

XRectanglePrototype.createdCallback = function() {
    // Call base
    XSquarePrototype.createdCallback.call(this);

    // Add width
    this.style.width = "250px";
};

var XRectangle = document.registerElement('x-rectangle', {
    prototype: XRectanglePrototype
});
                  
            

Example:

XSquareButton

                
                    <button is="x-square-button"></button>
                
            

                  
// Prototype inheritance
var XSquareButtonPrototype = Object.create(HTMLButtonElement.prototype);

XSquareButtonPrototype.createdCallback = function() {
    // Add style
    this.style.border = "red 3px dashed";
    this.style.width = "50px";
    this.style.height = "50px";

    // Add click event
    this.onclick = function() { alert("Good job!"); };
    this.innerHTML = "Hi";
};

var XSquare = document.registerElement('x-square-button', {
    prototype: XSquareButtonPrototype,
    extends: 'button'
});
                  
            

Example: