component.js

  class VerticalTimelineCard extends HTMLElement {

    static get is() {
      return 'vertical-timeline-card';
    }
    
    static get observedAttributes() {
      return ['date', 'time', 'primarycolor', 'textcolor'];
    }

    constructor() {
      super();
      let tmpl = document.createElement('template');
      tmpl.innerHTML = VerticalTimelineCard.template;

      this.shadow = this.attachShadow({mode: 'open'});
      this.shadow.appendChild(tmpl.content.cloneNode(true));
    }
    
    
    connectedCallback() {
      const now = new Date().toISOString();
      this._upgradeProperty('date');
      this._upgradeProperty('time');
      this._upgradeProperty('primarycolor');
      this._upgradeProperty('textcolor');
      
      if (!this.hasAttribute('date')) {
        this.setAttribute('date', now.substring(0, 10));
      }
      if (!this.hasAttribute('time')) {
        this.setAttribute('time', now.substring(11, 19));
      }
      if (!this.hasAttribute('primarycolor')) {
        this.setAttribute('primarycolor', '#3F51B5');
      }
      if (!this.hasAttribute('textcolor')) {
        this.setAttribute('textcolor', this.calcColor(this.getAttribute('primarycolor')));
      }
      
    }
    
    attributeChangedCallback(name, oldValue, newValue) {
      switch(name) {
        case 'primarycolor': {
          this.setAttribute('textcolor', this.calcColor(newValue));      
          break;
        }
        case 'date': {
          this.shadow.querySelector('.timeline-img > p').innerHTML = newValue;
          break;
        }
        case 'time': {
          this.shadow.querySelector('.date > p').innerHTML = newValue;
          break;
        }
      } 
    }
    
    calcColor(textColor) {
      if(textColor && this.isLight(textColor)) {
        return '#000000';
      } else {
        return '#FFFFFF';
      }
    }
    
    isLight(hexColor) {
      const R = Number.parseInt(hexColor.slice(1, 3), 16);
      const G = Number.parseInt(hexColor.slice(3, 5), 16);
      const B = Number.parseInt(hexColor.slice(5, 7), 16);
      const maxBrightness = this.calculateBrightness(255, 255, 255);
      const brightness = this.calculateBrightness(R, G, B);
      const pBrightness = brightness / maxBrightness;
      return pBrightness > 0.5;
    }
    
    calculateBrightness(R, G, B) {
      return Math.sqrt((0.299 * Math.pow(R, 2)) + (0.587 * Math.pow(G, 2)) + (0.114 * Math.pow(B, 2)));
    }
    
    _upgradeProperty(prop) {
      if (this.hasOwnProperty(prop)) {
        let value = this[prop];
        delete this[prop];
        this[prop] = value;
      }
    }
    
    set date(date) {
      this.setAttribute('date', date);
    }
    
    get date() {
      return this.getAttribute('date');
    }
    
    set time(time) {
      this.setAttribute('time', time);
    }
    
    get time() {
      return this.getAttribute('time');
    }
    
    get primarycolor() {
      return this.getAttribute('primarycolor');
    }
    
    set primarycolor(primarycolor) {
      this.setAttribute('primarycolor', primarycolor);
    }
    
    get textcolor() {
      return this.getAttribute('textcolor');
    }
    
    set textcolor(textcolor) {
      this.setAttribute('textcolor', textcolor);
    }
  }