fix: create CSS rules by style element doesn't work in salesforce (#900)

* fix: create CSS rules by style element doesn't work in salesforce
- for some reason the new approach to use `const style = document.createElement('style')` and then `style.sheet` doesn't work in Salesforce, so let's add back the previous code as a fallback in case option 1 doesn't work

Author: ghiscoding

src/slick.grid.ts

@@ -2306,24 +2306,55 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this._style = document.createElement('style');
     this._style.nonce = 'random-string';
     (this._options.shadowRoot || document.head).appendChild(this._style);
+
+    const rowHeight = (this._options.rowHeight! - this.cellHeightDiff);
+    const rules = [
+      `.${this.uid} .slick-group-header-column { left: 1000px; }`,
+      `.${this.uid} .slick-header-column { left: 1000px; }`,
+      `.${this.uid} .slick-top-panel { height: ${this._options.topPanelHeight}px; }`,
+      `.${this.uid} .slick-preheader-panel { height: ${this._options.preHeaderPanelHeight}px; }`,
+      `.${this.uid} .slick-headerrow-columns { height: ${this._options.headerRowHeight}px; }`,
+      `.${this.uid} .slick-footerrow-columns { height: ${this._options.footerRowHeight}px; }`,
+      `.${this.uid} .slick-cell { height: ${rowHeight}px; }`,
+      `.${this.uid} .slick-row { height: ${this._options.rowHeight}px; }`,
+    ];
+
     const sheet = this._style.sheet;
     if (sheet) {
-      const rowHeight = (this._options.rowHeight! - this.cellHeightDiff);
-      sheet.insertRule(`.${this.uid} .slick-group-header-column { left: 1000px; }`);
-      sheet.insertRule(`.${this.uid} .slick-header-column { left: 1000px; }`);
-      sheet.insertRule(`.${this.uid} .slick-top-panel { height: ${this._options.topPanelHeight}px; }`);
-      sheet.insertRule(`.${this.uid} .slick-preheader-panel { height: ${this._options.preHeaderPanelHeight}px; }`);
-      sheet.insertRule(`.${this.uid} .slick-headerrow-columns { height: ${this._options.headerRowHeight}px; }`);
-      sheet.insertRule(`.${this.uid} .slick-footerrow-columns { height: ${this._options.footerRowHeight}px; }`);
-      sheet.insertRule(`.${this.uid} .slick-cell { height: ${rowHeight}px; }`);
-      sheet.insertRule(`.${this.uid} .slick-row { height: ${this._options.rowHeight}px; }`);
+      for (const rule of rules) {
+        sheet.insertRule(rule);
+      }
 
       for (let i = 0; i < this.columns.length; i++) {
         if (!this.columns[i] || this.columns[i].hidden) { continue; }
 
         sheet.insertRule(`.${this.uid} .l${i} { }`);
         sheet.insertRule(`.${this.uid} .r${i} { }`);
       }
+    } else {
+      // fallback in case the 1st approach doesn't work, let's use our previous way of creating the css rules which is what works in Salesforce :(
+      this.createCssRulesAlternative(rules);
+    }
+  }
+
+  /** Create CSS rules via template in case the first approach with createElement('style') doesn't work */
+  protected createCssRulesAlternative(rules: string[]) {
+    const template = document.createElement('template');
+    template.innerHTML = '<style type="text/css" rel="stylesheet" />';
+    this._style = template.content.firstChild as HTMLStyleElement;
+    (this._options.shadowRoot || document.head).appendChild(this._style);
+
+    for (let i = 0; i < this.columns.length; i++) {
+      if (!this.columns[i] || this.columns[i].hidden) { continue; }
+
+      rules.push(`.${this.uid} .l${i} { }`);
+      rules.push(`.${this.uid} .r${i} { }`);
+    }
+
+    if ((this._style as any).styleSheet) { // IE
+      (this._style as any).styleSheet.cssText = rules.join(' ');
+    } else {
+      this._style.appendChild(document.createTextNode(rules.join(' ')));
     }
   }