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.

Author: Alain Dumesny

README.md

@@ -143,7 +143,7 @@ $(function () {
 
   // you can now call on any grid this...
   $('.grid-stack').data('gridstack').printCount();
- });
+});
 ```
 
 ## Touch devices support

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)

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;
     }