text: export default class DOM {
  
      static a = (...args) => DOM.makeElement(`a`, ...args);
      static button = (...args) => DOM.makeElement(`button`, ...args);
      static div = (...args) => DOM.makeElement(`div`, ...args);
      static h1 = (...args) => DOM.makeElement(`h1`, ...args);
      static h2 = (...args) => DOM.makeElement(`h2`, ...args);
      static h3 = (...args) => DOM.makeElement(`h3`, ...args);
      static h4 = (...args) => DOM.makeElement(`h4`, ...args);
      static h5 = (...args) => DOM.makeElement(`h5`, ...args);
      static header = (...args) => DOM.makeElement(`header`, ...args);
      static section = (...args) => DOM.makeElement(`section`, ...args);
      static p = (...args) => DOM.makeElement(`p`, ...args);
      static span = (...args) => DOM.makeElement(`span`, ...args);
      static img = (...args) => DOM.makeElement(`img`, ...args);
      static td = (...args) => DOM.makeElement(`td`, ...args);
      static attributeExceptions = [
        `role`,
      ];
      
      static elid(id) { 
        return document.getElementById(id);
      }
    
      static appendText(el, text) {
        const textNode = document.createTextNode(text);
        el.appendChild(textNode);
      }
      
      static appendArray(el, children) {
        children.forEach((child) => {
          if (Array.isArray(child)) {
            DOM.appendArray(el, child);
          } else if (child instanceof window.Element) {
            el.appendChild(child);
          } else if (typeof child === `string`) {
            DOM.appendText(el, child);
          }
        });
      }
      
      static setStyles(el, styles) {
        if (!styles) {
          el.removeAttribute(`styles`);
          return;
        }
      
        Object.keys(styles).forEach((styleName) => {
          if (styleName in el.style) {
            el.style[styleName] = styles[styleName]; // eslint-disable-line no-param-reassign
          } else {
            console.warn(`${styleName} is not a valid style for a <${el.tagName.toLowerCase()}>`);
          }
        });
      }
      
      static makeElement(type, textOrPropsOrChild, ...otherChildren) {
        const el = document.createElement(type);
      
        if (Array.isArray(textOrPropsOrChild)) {
          DOM.appendArray(el, textOrPropsOrChild);
        } else if (textOrPropsOrChild instanceof window.Element) { 
          el.appendChild(textOrPropsOrChild);
        } else if (typeof textOrPropsOrChild === `string`) {
          DOM.appendText(el, textOrPropsOrChild);
        } else if (typeof textOrPropsOrChild === `object`) {
          Object.keys(textOrPropsOrChild).forEach((propName) => {
            if (propName in el || attributeExceptions.includes(propName)) {
              const value = textOrPropsOrChild[propName];
      
              if (propName === `style`) {
                DOM.setStyles(el, value);
              } else if (value) {
                el[propName] = value;
              }
            } else {
              console.warn(`${propName} is not a valid property of a <${type}>`);
            }
          });
        }
      
        if (otherChildren) DOM.appendArray(el, otherChildren);
      
        return el;
      }
    }
      