Using HTML attributes from specification in kebab-case

[alkorlos]

Describe the problem

Now there is no good way to use native HTML attributes in kebab-case as they are defined in the specification.

In Svelte need to specify all prop, can't just use native attributes.

For example component SvgIcon:

<svg aria-label={label}></svg>

<script>
  export let label;
</script>

And use it:

<SvgIcon label="lorem"></SvgIcon>

Now is no good way use it like <SvgIcon aria-label="lorem"></SvgIcon>
Every frontend developer knows the aria-label attribute and what it does, but it cannot be used. All possible options like ariaLabel, aria_label and so on are not standard and less understandable.

It can be done with export let label = $$props['aria-label'];, but, if I understood the documentation correctly, it's better not to do this due to performance issues.

Describe the proposed solution

I see #3852, but the discussion was about warnings and custom attributes in kebab-case, maybe implementing the ability to use native attributes would be easier? Using a whitelist?

There can be many options with different syntax. For example:

Function overriding the attribute name:

  export let label;
  defineAttribute(label, "aria-label");

Defining the attribute name during assignment:

  export let label = { value: undefined, attribute: "aria-label" };

Special object accepting attributes from a whitelist:

export let standartAttributes = {
  'class': undefined,
  'aria-label': 'lorem'
};

Either way, the ability to use attributes in HTML as defined in the specification will make the code more understandable.

Importance

would make my life easier

[dummdidumm]

Closing as duplicate of #3852 . This will be possible to do in Svelte 5, see the last comment in the linked issue.

[alkorlos]

@dummdidumm Thank you! You last comment in #3852 realy missed a couple of hours ago