I'm creating a Heading component in svelte as a part of learning the basics of this framework. The component behavior is pretty straight-forward.
The component will have a prop named level, which will render the appropriate <h> tag accordingly.
For eg.
<Heading level={3}> would render <h3>content</h3> <Heading level={1}> would render <h1>content</h1>I can achieve this currently with,
<script> export let level = 3;</script>{#if level === 1}<h1><slot></slot></h1>{:else if level === 2}<h2><slot></slot></h2>{:else if level === 3}<h3><slot></slot></h3>{:else if level === 4}<h4><slot></slot></h4>{:else if level === 5}<h5><slot></slot></h5>{/if}But this kind of feels like a very naive approach. Is there any better way to achieve this behaviour in svelte ?
