How to use javascript libraries that require binding to DOM nodes

Question

I have been trying to use Ag-Grid with Svelte. I understand that the main problem with using this grid library is that it needs to bind to a dom element that may not exist at the time of the code executing. For example:

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

In this case, the #myGrid element does not exist yet.

I have tried creating an element and then placing it on the HTML part of the Svelte component, like this.

let eGridDiv = document.createElement("DIV"); 
let gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(eGridDiv, gridOptions);

And then down on the HTML section

<eGridDiv />

However, the new element does not seem to be initialized by Ag-Grid.

So what is the recommended way to use these types of libraries in Svelte?

Answer 1

If you want to use a DOM node in the script part of your component you can use the bind:this={domNode} element binding to get a reference to it, and then use it after the component has been rendered in onMount.

<script>
  import { onMount } from 'svelte';
  let domNode;

  // ...

  onMount(() => {
    const gridOptions = { columnDefs: columnDefs, rowData: $orders };
    new Grid(domNode, gridOptions);
  });
</script>

<div bind:this={domNode} />