How we can use split.js in shadow element ?

[imran-momin4041]

I want to use this split.js in my custom shadow element but every time when I call the var instance = Split([], ...). and it is not able to find the target element

[hlridge]

In my case, with a single vertical split and two surrounding DIV's, it didn't work out-of-the-box for me, either. First, I had to define the gutter element in the Split-Grid constructor using shadowRoot instead of document:

Changing from:

Split({
  columnGutters: [{
    track: 1,
    element: document.querySelector('.gutter-col-1')
  }]
})

to:

Split({
  columnGutters: [{
    track: 1,
    element: this.shadowRoot.querySelector('.gutter-col-1')
  }]
})

Still, an error was thrown, ("Unable to determine grid template tracks from styles.") in Split-Grid's getRawTracks function, because it couldn't find the CSS grid-template-columns value of the ".grid" element. This made dragging the gutter fail.

Setting this grid-template-columns value inline on the ".grid" element instead solved the issue for me.

Changing from:

.grid {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  height: 100%;  
}

<div class="grid">

to:

.grid {
  display: grid;
  height: 100%;  
}

<div class="grid" style="grid-template-columns: 1fr 10px 1fr;">

[MichaPau]

This works for me - but only if my gutter div size is defined in px. For example using rem like <div class="grid" style="grid-template-columns: 1fr 0.25rem 1fr;"> throws Uncaught TypeError: track2 is null