Merge pull request #2558 from confususs/fix-removing-style-node-when-in-parent

fix: remove style node when attached to parent node in a shadow root

Author: adumesny

src/gridstack.ts

@@ -1489,7 +1489,8 @@ export class GridStack {
   protected _removeStylesheet(): GridStack {
 
     if (this._styles) {
-      Utils.removeStylesheet(this._styleSheetClass);
+      const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
+      Utils.removeStylesheet(this._styleSheetClass, styleLocation);
       delete this._styles;
     }
     return this;
@@ -1517,7 +1518,7 @@ export class GridStack {
     // create one as needed
     if (!this._styles) {
       // insert style to parent (instead of 'head' by default) to support WebComponent
-      let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
+      const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
       this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {
         nonce: this.opts.nonce,
       });
@@ -2216,7 +2217,7 @@ export class GridStack {
         if (this._gsEventHandler['dropped']) {
           this._gsEventHandler['dropped']({...event, type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);
         }
-        
+
         return false; // prevent parent from receiving msg (which may be grid as well)
       });
     return this;

src/utils.ts

@@ -182,8 +182,9 @@ export class Utils {
   }
 
   /** removed the given stylesheet id */
-  static removeStylesheet(id: string): void {
-    let el = document.querySelector('STYLE[gs-style-id=' + id + ']');
+  static removeStylesheet(id: string, parent?: HTMLElement): void {
+    const target = parent || document;
+    let el = target.querySelector('STYLE[gs-style-id=' + id + ']');
     if (el && el.parentNode) el.remove();
   }