Merge pull request #1152 from adumesny/develop

adumesny · web-flow · commit 5defb90ff0f9 · 2020-02-16T23:46:58.000-08:00
WebComponent support
diff --git 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
@@ -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
@@ -75,7 +75,7 @@
         return Utils.sortBy(nodes, function(n) { return (n.x + n.y * column); });
     },
 
-    createStylesheet: function(id) {
+    createStylesheet: function(id, parent) {
       var style = document.createElement('style');
       style.setAttribute('type', 'text/css');
       style.setAttribute('data-gs-style-id', id);
@@ -84,7 +84,8 @@
       } else {
         style.appendChild(document.createTextNode(''));
       }
-      document.getElementsByTagName('head')[0].appendChild(style);
+      if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head
+      parent.insertBefore(style, parent.firstChild);
       return style.sheet;
     },
 
@@ -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;
     }
