gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

HTML

<script src="https://cdn.jsdelivr.net/npm/gridstack@5.0.0/dist/gridstack-h5.js"></script>
<h2>Inside Custom Element with Shadow DOM</h2>
<demo-gridstack></demo-gridstack>

CSS

*,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      body {
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
      }

JavaScript

class HTMLDemoGridStack extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: "open"
    });
  }

  connectedCallback() {
    const styleBlocks = `
<link href="https://unpkg.com/gridstack@3.3.0/dist/gridstack.min.css" rel="stylesheet" />
<style type="text/css">
*, *::before, *::after {
box-sizing: border-box;
}
:host { display: block; }

.grid-stack {
background-color: #fafad2;
}
.grid-stack-item-content {
background-color: #18bc9c;
}
</style>
`;

    this.shadowRoot.innerHTML = `${styleBlocks}<div class="grid-stack"></div>`;
    const gridEl = this.shadowRoot.querySelector("div");
    const items = [{
        content: "my first widget"
      }, // will default to location (0,0) and 1x1
      {
        w: 2,
        content: "another longer widget!"
      }, // will be placed next at (1,0) and 2x1
      {
        content: "3rd Widget"
      },
    ];
    const grid = GridStack.init({
      disableOneColumnMode: true,
      draggable: {
    		appendTo: 'parent'
  		},
      cellHeight: 100
    }, gridEl);
    grid.load(items);
  }
}

customElements.define("demo-gridstack", HTMLDemoGridStack);