Albatross.js

/**
 * @module holy-albatross
 * @description
 * A custom element for switching between horizontal and vertical layouts
 * using Flexbox, where the switch property defines the minimum container width
 * for the horizontal layout
 * @property {string} switch A CSS width value
 * @property {string} margin A CSS margin value
 */

export default class Albatross extends HTMLElement {
  constructor() {
    super();
    this.observed = ['switch', 'margin'];
    this.observed.forEach(attr => {
      Object.defineProperty(this, attr, {
        get: function () {
          return this.getAttribute(attr);
        },
        set: function (val) {
          return this.setAttribute(attr, val);
        }
      });
    });

    this.attachShadow({ mode: 'open' });

    this.render = () => {
      this.shadowRoot.innerHTML = `
        <style>
          :host {
            ${this.margin && `margin: calc((${this.margin} / 2) * -1);`}
          }

          ::slotted(*) {
            ${this.switch && `flex-basis: calc((${this.switch} - 100%) * 999) !important;`}
            ${this.margin && `margin: calc(${this.margin} / 2);`}
          }
        </style>
        <slot></slot>  
      `;
    }
  }

  static get observedAttributes() {
    return ['switch', 'margin'];
  }

  attributeChangedCallback() {
    this.render();
  }
}

customElements.define('holy-albatross', Albatross);

This should work, right? this.observed = Albatross.observedAttributes;