WebComponent support - specify where dynamic styles go instead of head

[newlukai]

We try to integrate Gridstack in a WebComponent/Polymer environment which means to embed Gridstack in a custom element. We recognized that the dynamically calculated stylesheets for the height of items is added to the head node, so the styles are not available inside the shadow DOM of the custom element.

In order to enable Gridstack for WebComponents it would be great if Gridstack would be aware of the Shadow DOM and for example allow to provide the DOM root where to place the dynamically created stylesheets.

[IftachSadeh]

Hey radiolips,

Can you please say if this is expected to be fixed? Currently use with polymer is simply impossible.
If it's not a priority, is there a recommended workaround in the meantime?

[VinodLouis]

Any one got workaround for this ?

[VinodLouis]

I tried something in case if anyone is interested https://github.com/VinodLouis/polymer-gridstack

[adumesny] Note: this code IS NOT BASED on gristack (nor maintained), or is older than 2014.

[radiolips]

@VinodLouis Can you create a PR with changes such that gridstack would work as a web component?

[adumesny]

I use angular component for this lib, and having local to that components styles would be better and might be using webcomponents soon as well.

@VinodLouis wish you had done a PR instead of creating a fork off the code!

looking at your file you have var GridStackEngine = function (width, onchange) which means it is very very old (or not based on gridstack but maybe gridster?) as the float param feature was added back in 11/19/2014 2 days after this project started....
(all the methods were renamed to camelCase in 2/17/2016 which do you not have either). And you released your in Aug 2017 ???

Note: that gridstack auto-generated CSS files added to the head on 11/25/2014 (for y and height in px) which you don't do
Note2: the only real change I see vs our first file (other than missing float, oneColumn, etc...) is changed
appendTo: 'body', to appendTo: 'parent',

[adumesny]

the offending code is:

var Utils = {
  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;
  },

  removeStylesheet: function(id) {
    $('STYLE[data-gs-style-id=' + id + ']').remove();
  },
}

which can be overridden using:

$(function () {
  window.GridStackUI.Utils.createStylesheet = function(id) {
    //...new code...
  };

  $('.grid-stack').gridstack();
...
});

[adumesny]

sorry for taking so long to address. fixed in 0.6.4