Web Components

Custom elements

Shadow DOM​

HTML templates​
 

HTML Imports

<custom-square></custom-square>

<script>

    // add polyfills

    class Square extends HTMLElement {
      static get observedAttributes() {return ['w', 'l']; }

      constructor() {
        super();
    
        var div = document.createElement('div');
        var style = document.createElement('style');
      }
    
      connectedCallback() {
        console.log('Custom square element added to page.');
      }
    
      disconnectedCallback() {
        console.log('Custom square element removed from page.');
      }
    
      adoptedCallback() {
        console.log('Custom square element moved to new page.');
      }
    
      attributeChangedCallback(name, oldValue, newValue) {
        console.log('Custom square element attributes changed.');
      }
    }
    
    customElements.define('custom-square', Square);   
</script>

Solutions

Native JS WebAPI

Webcomponents.org

Polymer

Angular elements

<custom-square></custom-square>

<script>

    // add polyfills

    class Square extends HTMLElement {
      static get observedAttributes() {return ['w', 'l']; }

      constructor() {
        super();
    
        var div = document.createElement('div');
        var style = document.createElement('style');
      }
    
      connectedCallback() {
        console.log('Custom square element added to page.');
      }
    
      disconnectedCallback() {
        console.log('Custom square element removed from page.');
      }
    
      adoptedCallback() {
        console.log('Custom square element moved to new page.');
      }
    
      attributeChangedCallback(name, oldValue, newValue) {
        console.log('Custom square element attributes changed.');
      }
    }
    
    customElements.define('custom-square', Square);   
</script>