applyElementAttribute = (
  $element,
  key,
  value,
  hasStyleAttribute = false
) => {
  if (key === "cssText") {
    /**
     * cssText: 'position:absolute'
     */
    $element.cssText(value);
    return;
  } else if (key === "style") {
    /**
     * style: { key: value }
     */
    if (typeof value !== "string") {
      const css = {};
      Object.entries(value).forEach(([key, value]) => {
        css[key] = convertToPx(key, value);
      });

      if (hasStyleAttribute) {
        const styleText = Object.keys(css)
          .map((key) => {
            return `${key}:${css[key]};`;
          })
          .join("");
        $element.attr("style", styleText);
      } else {
        $element.css(css);
      }
    }

    return;
  } else if (key === "class") {
    //  "class" : [ 'className', 'className' ]
    //  "class" : { key: true, key: false }
    //  "class" : 'string-class'

    if (Array.isArray(value)) {
      $element.updateClass(classnames(...value));
    } else {
      $element.updateClass(classnames(value));
    }

    return;
  } else if (key === "callback") {
    if (typeof value === "function") {
      value();
      return;
    }
  }

  if (typeof value === "undefined") {
    $element.removeAttr(key);
  } else {
    if ($element.el.nodeName === "TEXTAREA" && key === "value") {
      $element.text(value);
    } else if (key === "text" || key === "textContent") {
      $element.text(value);
    } else if (key === "innerHTML" || key === "html") {
      $element.html(value);
    } else if (key === "htmlDiff") {
      $element.updateDiff(value);
    } else if (key === "svgDiff") {
      $element.updateSVGDiff(value);
    } else if (key === "value") {
      $element.val(value);
    } else {
      $element.attr(key, value);
    }
  }
}
@param {Dom} $element
@param {string} key
@param {any} value
@param {boolean} [isServer=false]