Notification :: https://jsfiddle.net/oyksaw8h/68/

Notification.js

class Notification {
    constructor() {
      this.notifyIDs = [];
      
      let template = `<header role="header"><i role="button">Close</i></header><main role="main"></main>`;
      let style = `
      <style>
        :host {
          max-width: 350px !important;
          min-width: 260px !important;
          min-height: 91px !important;
          box-shadow: 0 2px 5px rgba(7, 7, 7, 0.5);
          border-radius: 6px !important;
          background-color: #fff !important;   
          position: fixed;
          bottom: 10px;
          left: 10px;
          z-index: 2147483647 !important;
          padding: 12px !important;
          box-sizing: border-box !important;
          overflow: hidden !important;
          user-select: none !important;
          pointer-events: none !important;
          visibility: hidden;
          font-family: Arial, sans-serif;
        }
        
        :host(.show) { 
          visibility: visible;
          animation: fade .7s;
        }
        
        :host(.hide) {
          animation-play-state: paused;
        }
        
        [role="header"] {
          margin: -12px -12px 0;
          padding: 5px 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
          line-height: 28px;
          text-transform: uppercase;
          position: relative;
        }
        
        .error [role="header"] { background: #f85353; }
        .error [role="header"]:before { content: "Error" }
        .success [role="header"] { background: rgba(0,128,0,.62); }
        .success [role="header"]:before { content: "Success" }
        .info [role="header"] { background: rgba(239,193,12,.8);}
        .info [role="header"]:before { content: "Info" }
        
        [role="main"] {
          padding: 12px 0;
          font-size: 16px;
          line-height: normal;
          color: #252525;
        }
        
        i[role="button"] {
          position: absolute;
          right: 12px;
          top: 13px;
          width: 12px;
          height: 12px;
          pointer-events: all;
          text-indent: -9999px;
          color: #fff;
          overflow: hidden;
          cursor: pointer;
        }
        
        i[role="button"]:before {
          content: '';
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAWUlEQVQoU2P8////BgYGhgZGRsYLDHjA////DcDqoAyQpgBcmlDUgAzFpwldjhHmCmyasInBNaDbBDUIw6koGtA0gbgY/qJMA7KbCTqJJE+TFKwkRxypSQMAEaNhwaIRjs0AAAAASUVORK5CYII=) no-repeat 0 0;			width: 12px;
          height: 12px;
          display: block;
        }
        
        @keyframes fade {
            0%   { opacity: 0;}
            100% { opacity: 1;}
        }
      </style>`;
      
      this.init(template, style);
    }
    
    init(template, style) {
      let wrapper = this.wrapper = document.createElement('aside'),
          root = this.root = document.createElement('div');
          
      wrapper.setAttribute('role', 'alert');
      root.insertAdjacentHTML('beforeEnd', template);
      
      let shadowRoot = this.shadowRoot = wrapper.attachShadow({mode: 'closed'});
      
      shadowRoot.innerHTML = style;
      shadowRoot.appendChild(root);
      
      this.header = this.root.querySelector('[role="header"]');
      this.message = this.root.querySelector('[role="main"]');
      this.close = this.root.querySelector('i[role="button"]');
      
      this.hide();
      document.querySelector('body').appendChild(wrapper);
    }
    
    create(data) {
      this.root.classList.remove( this.root.classList.value || 0 );
      this.root.classList.add( data.type );
      this.message.textContent = data.message;
      this.show(data.delay);
    }
    
    show(delay=3500) { 
      
      // appear notify
      this.wrapper.classList.remove('hide');
      this.wrapper.classList.add('show');
      this.close.addEventListener('click', () => { this.hide() }, false);
      
      this.clear();
      this.notifyIDs = window.setTimeout(this.hide.bind(this), delay);
    }
    
    hide() {
      
      // disappear notify
      this.wrapper.classList.remove('show');
      this.wrapper.classList.add('hide');
      
      this.close.removeEventListener('click', () => { this.hide() }, false);
      this.clear();
    }
    
    clear() { window.clearTimeout( this.notifyIDs ) }
  }