+1

A way to render conditionally the attributes of a tag.

Creating an object and setting the attributes as prop of the object if they should be rendered. Then use the spread operator on it:

<script>
    export let value = "";
    export let id = "";
    export let placeholder = "";
    export let type = "text";

  let conditionalAttributes = {};

  if (id) conditionalAttributes.id = id;
  if (placeholder) conditionalAttributes.placeholder = placeholder;
  if (type) conditionalAttributes.type = type;
</script>

<input {...conditionalAttributes} bind:value={value} />

In general, I don’t think the question should be whether a component uses its own framework or not. Instead, the question should be: Is this component small enough/fast enough for my use case?

A good news ! Typescript is supported in svelte