Я хотел бы инициализировать select элемент, как в примере с выбором тома, своим собственным методом:

 <select id="select-repo" placeholder="Pick a repository..." multiple></select>
 

 function my_select_init(el) {
  new TomSelect(el, {
    persist: false,
    createOnBlur: true,
    create: true
  })
}
 

Есть два разных способа:

Случай 1: Загружается полная страница

В этом случае вы можете использовать один из современных методов загрузки.

Например:

 document.addEventListener('DOMContentLoaded', function () {
  // do something here ...
}, false);
 

Случай 2: фрагмент вставляется в DOM через htmx

Как инициализировать фрагмент кода?

Предпочтительное решение

Я хочу, чтобы HTML и код при загрузке находились в одном месте (Локальность поведения), и я хочу, чтобы этот фрагмент html был одинаковым для обоих случаев.

До сих пор я не использую гиперскрипт или Alpine.js, но я готов использовать одну из этих библиотек, если это упростит решение.

То, что вы хотите использовать htmx.onLoad , — это обратный вызов:

   htmx.onLoad(function(elt) {
    // look up all elements with the tomselect class on it within the element
    var allSelects = htmx.findAll(elt, ".tomselect")
    for( select of allSelects ) {
      new TomSelect(select, {
                    persist: false,
                    createOnBlur: true,
                    create: true
                   });
    }
  })
 

Этот javascript будет выполняться первоначально при загрузке страницы в body элемент, а затем для всех новых материалов, добавляемых htmx на страницу.

Видишь https://htmx.org/docs/#3rd-party