Web component to convert px to rem

px-to-rem.js

/*
  Quick and dirty web component to convert px to rem
  Base font size is set to 16px (browser default)

  Usage:
  <px-to-rem px="32/48"/>

  Returns:
  32/48px - 2/3rem
*/

class PxToRem extends HTMLElement {
  static define(tagName = 'px-to-rem') {
    customElements.define(tagName, this)
  }

  get px() {
    const px = this.getAttribute('px')
    if (!px) {
      console.log('px attribute missing')
      return '';
    }
    return px.split('/');
  }

  calculateRem(px) {
    const rems = [];
    px.forEach(val => {
      rems.push(val / 16);
    });

    return rems.join('/');
  }

  connectedCallback() {
    this.textContent = 
      `${this.px.join('/')}px - 
      ${this.calculateRem(this.px)}rem`;
  }
}

PxToRem.define();