Rendering different HTML element or component types

In any dynamic application, there comes a time when you need even more flexibility than what static components or elements offer. What if you don’t know the type of element or component you’ll need to render until runtime?

Let’s imagine that you’re building a form generator, and the type of form field – whether it’s <Input>, <Checkbox>, or <Select> – is determined by dynamic data. How could you switch between these components seamlessly, especially when they share the same set of props?

One straightforward approach is to use Svelte’s {#if} blocks to conditionally render the component you need. Here is an example code snippet:

<script>
  import Input from './Input.svelte';
  import Checkbox from './Checkbox.svelte';
  import Select from './Select.svelte';
  let type = "input...