title: htmx: onLoad: "on full page load" and "on after swap"
body: <p>I would like to initialize a <code>select</code> element like in the <a href="https://tom-select.js.org/examples/" rel="nofollow noreferrer">tom-select Example</a> with my own method:</p>
  <pre><code>&lt;select id=&quot;select-repo&quot; placeholder=&quot;Pick a repository...&quot; multiple&gt;&lt;/select&gt;
  </code></pre>
  <pre><code>function my_select_init(el) {
    new TomSelect(el, {
      persist: false,
      createOnBlur: true,
      create: true
    })
  }
  </code></pre>
  <p>There two different ways:</p>
  <h1>Case 1: The full page gets loaded</h1>
  <p>In this case you can use one of the modern onLoad methods.</p>
  <p>For example:</p>
  <pre><code>document.addEventListener('DOMContentLoaded', function () {
    // do something here ...
  }, false);
  </code></pre>
  <h1>Case 2: the fragment get inserted into the DOM via htmx</h1>
  <p>How to initialize the snippet?</p>
  <h1>Preferred solution</h1>
  <p>I want the HTML and the on-load code to be in one place (<a href="https://htmx.org/essays/locality-of-behaviour/" rel="nofollow noreferrer">Locality of Behaviour</a>) and I want this html fragment to be the same for both cases.</p>
  <p>Up to now I don't use Hyperscript or Alpine.js, but I am open to use one of these libraries, if this makes the solution simpler.</p>