How to reference to an unknown input sent in the children snippet

[idavollen]

I'm trying to develope a simple form validator by defining a FormElmBase.svelte file that commonly hooks the input onchange event with an external validate callback as below:

<script>
  let { name, label, validate, msg, children } = $props();
  let blured = $state(false);
  let inputElement = $state(null);

  function handleInput(event) {
    console.log('handleInput event: ', event, validate, name)
      if (validate) {
          validate(name, getInputValue(event.target));
      }
  }

  function getInputValue(el) {
      if (el.type === "checkbox") {
          return el.checked; // Boolean value for checkboxes
      } else if (el.type === "radio") {
          return document.querySelector(`input[name="${el.name}"]:checked`)?.value || "";
      }
      return el.value;
  }

  $effect(() => {
    console.log('effecting ...', name, inputElement, validate)
      if (inputElement) {
          inputElement.addEventListener("input", handleInput);
          inputElement.addEventListener("blur", () => (blured = true));
          inputElement.addEventListener("focus", () => (blured = false));
      }
  });
</script>

<div class="input-line form-group">
  <label for={"id_" + name}>{label}</label>  
  {@render children?.({ this: (el) => (inputElement = el) })}
  <span class="validate-err error-msg" class:blured>{msg}</span>
</div>

and then define a TextInput.svelte as below (so does textarea):

<FormElmBase name="username" validate={myValidate}>
     <input type="text" name="username" bind:this={this} /> 
</FormElmBase>

and Dropdown.svelte as below:

<FormElmBase name="city" validate={myValidate}>   
        <select name="city" bind:this={this}>
            <option value="">Select a city</option>
            <option value="Milan">Milan</option>
            <option value="Paris">Paris</option>
        </select>
</FormElmBase>

I'm now at my wits end {@render children?.({ this: (el) => (inputElement = el) })} has never set the html input element like, input, textarea, select, checkbox, etc from the children snippet to the inputElement in FormElmBase.svelte. Can someone shed the light on how the input element in the children snippet can be referenced/bound to such that I could add event listener of "input" for it order to to trigger the validate callback when input's value is changed

[idavollen]

I had thought of using bindable rune, https://svelte.dev/docs/svelte/$bindable However, the children snippet of the FormElmBase is unknown beforehand

[brunnerh]

You cannot use a regular binding unless you have a property, you probably could use the function binding syntax, though. Using a property the rendering should be done as:

{@render children?.({ set this(el) { inputElement = el } })}

You can only make use of this argument by explicitly defining the snippet, it would look like this:

<FormElmBase>
	{#snippet children(context)}
		<input bind:this={context.this} />
	{/snippet}
</FormElmBase>

Playground