Components that behave like regular HTML elements

[CalebPena]

Describe the problem

When creating a library with components that extend the functionality of an HTML element, it is difficult to make the component behave like an HTML element. Idealy, the user would be able to use the component like a regual HTML element. For example, if you want to create a component that extends the functionality of an input to log the value every time that it changes, you would have to add CSS variables for every style of the input. That which would also require the user to look at the documentation every time they wanted to change a style.

<script>
  export let value;
  
  $: console.log(value);
</script>

<input {...$$restProps} bind:value>

<style>
  input {
    font-size: var(--font-size);
    width: var(--width);
    ...
  }
</style>

A more complicated example could be a Modal component where the component aims to add all of the accessibility stuff for the modal, but you want the user to be able to customize it however they want like it was a regular div.

Describe the proposed solution

It would be nice if the user could use some components like a regular HTML element.

Example:

<script extends="input">
  export let value;
  
  $: console.log(value);
</script>

<input {...$$restProps} bind:value>

You could then use the component like:

<CustomInput type="text" class="custom-input" value="hello" />

<style>
  .custom-input {
    background-color: pink;
  }
</style>

The advantage of this method is that the user does not have to know how to use your custom input, they just have to know how to use a regular HTML input.

Importance

nice to have

[Prinzhorn]

My search for related issues brought up #8538 which also list more related issues.

[dummdidumm]

Closing on favor of those issues linked