From 4a48862fccb61465dc0738cdc66a8437bcfdc342 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <adumesny@vmware.com>
Date: Sun, 16 Feb 2020 23:43:23 -0800
Subject: [PATCH 1/2] WebComponent support * insert style before our grid
 (instead of head) to support webcomponent * fix #540 * tested on Chrome, FF,
 Edge, IE11 and all our demos *Note: I didn't have a way to test webcomponent
 support, but this should do it.

---
 README.md        |  2 +-
 doc/CHANGES.md   |  1 +
 src/gridstack.js | 34 ++++++++++++++++++----------------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index b9eedc38f..3a493ef7b 100644
--- a/README.md
+++ b/README.md
@@ -143,7 +143,7 @@ $(function () {
 
   // you can now call on any grid this...
   $('.grid-stack').data('gridstack').printCount();
- });
+});
 ```
 
 ## Touch devices support
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 3ba16de67..11e2adbc9 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -31,6 +31,7 @@ Change log
 
 ## v0.6.3-dev (upcoming changes)
 
+- fix [#540](https://github.com/gridstack/gridstack.js/issues/540) WebComponent support: CSS file now insert before grid instead of 'head'
 - fix [#1143](https://github.com/gridstack/gridstack.js/issues/1143) nested grids with different `acceptWidgets` class
 - fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) add/remove widget will also trigger change events when it should.
 - optimized `change` callback to save original x,y,w,h values and only call those that changed [1148](https://github.com/gridstack/gridstack.js/pull/1148)
diff --git a/src/gridstack.js b/src/gridstack.js
index fbdc490d0..19f220f53 100644
--- a/src/gridstack.js
+++ b/src/gridstack.js
@@ -75,22 +75,23 @@
         return Utils.sortBy(nodes, function(n) { return (n.x + n.y * column); });
     },
 
-    createStylesheet: function(id) {
-      var style = document.createElement('style');
-      style.setAttribute('type', 'text/css');
-      style.setAttribute('data-gs-style-id', id);
-      if (style.styleSheet) {
-        style.styleSheet.cssText = '';
-      } else {
-        style.appendChild(document.createTextNode(''));
-      }
-      document.getElementsByTagName('head')[0].appendChild(style);
-      return style.sheet;
-    },
+  createStylesheet: function(id, parent) {
+    var style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.setAttribute('data-gs-style-id', id);
+    if (style.styleSheet) {
+      style.styleSheet.cssText = '';
+    } else {
+      style.appendChild(document.createTextNode(''));
+    }
+    if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head
+    parent.insertBefore(style, parent.firstChild);
+    return style.sheet;
+  },
 
-    removeStylesheet: function(id) {
-      $('STYLE[data-gs-style-id=' + id + ']').remove();
-    },
+  removeStylesheet: function(id) {
+    $('STYLE[data-gs-style-id=' + id + ']').remove();
+  },
 
     insertCSSRule: function(sheet, selector, rules, index) {
       if (typeof sheet.insertRule === 'function') {
@@ -1068,7 +1069,8 @@
       Utils.removeStylesheet(this._stylesId);
     }
     this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
-    this._styles = Utils.createStylesheet(this._stylesId);
+    // insert style to parent (instead of 'head') to support WebComponent
+    this._styles = Utils.createStylesheet(this._stylesId, this.container.get(0).parentNode);
     if (this._styles !== null) {
       this._styles._max = 0;
     }

From 33b4e32f967c9da5a3d600716b11b44dcb7eabcb Mon Sep 17 00:00:00 2001
From: Alain Dumesny <adumesny@vmware.com>
Date: Sun, 16 Feb 2020 23:45:36 -0800
Subject: [PATCH 2/2] lint fix

---
 src/gridstack.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/gridstack.js b/src/gridstack.js
index 19f220f53..6436a9317 100644
--- a/src/gridstack.js
+++ b/src/gridstack.js
@@ -75,23 +75,23 @@
         return Utils.sortBy(nodes, function(n) { return (n.x + n.y * column); });
     },
 
-  createStylesheet: function(id, parent) {
-    var style = document.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.setAttribute('data-gs-style-id', id);
-    if (style.styleSheet) {
-      style.styleSheet.cssText = '';
-    } else {
-      style.appendChild(document.createTextNode(''));
-    }
-    if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head
-    parent.insertBefore(style, parent.firstChild);
-    return style.sheet;
-  },
+    createStylesheet: function(id, parent) {
+      var style = document.createElement('style');
+      style.setAttribute('type', 'text/css');
+      style.setAttribute('data-gs-style-id', id);
+      if (style.styleSheet) {
+        style.styleSheet.cssText = '';
+      } else {
+        style.appendChild(document.createTextNode(''));
+      }
+      if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head
+      parent.insertBefore(style, parent.firstChild);
+      return style.sheet;
+    },
 
-  removeStylesheet: function(id) {
-    $('STYLE[data-gs-style-id=' + id + ']').remove();
-  },
+    removeStylesheet: function(id) {
+      $('STYLE[data-gs-style-id=' + id + ']').remove();
+    },
 
     insertCSSRule: function(sheet, selector, rules, index) {
       if (typeof sheet.insertRule === 'function') {