feat: hyphenated attributes in custom elements

[WIStudent]

While creating web components with svelte I noticed that it is not possible to use hyphenated (kebab-case) attributes.

Others described some workarounds by extending the web component again after it was created by svelte (#3852 (comment)), but as far as I could see no one proposed a solution for this problem in svelte itself yet. So I thought I give it a try.

This PR adds a mapping between kebab-case web component attributes and camel-case svelte properties.

A svelte property like this

<svelte:options tag="custom-element"/>

<script>
  export let customAttribute;
</script>

<p>{customAttribute}</p>

can then be set like this:

<custom-element custom-attribute="some value"></custom-element>

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with [feat], [fix], [chore], or [docs].
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

[WIStudent]

Also I just saw that the kebab to camel-case mapping was also proposed in #875 but was never implemented. Not sure why though.

[taylorylee]

Hi, I am reopening this thread. I am running into similar problems and was wondering when kebab-case will be supported in Svelte. I am running into the same problem as https://github.com/sveltejs/svelte/issues/3852[Issue 3852](#3852)

I am using VSCode right now

[joelhickok]

This is one of those things... where if you just ignore it long enough, maybe it will go away? But it is NOT going away,. People are still trying to use hyphenated attributes, since it is the way that HTML Elements are specified, after all. This has always driven me crazy about Svelte, but I love Svelte and forgive it for it's occasional flaws.

Still, PLEASE, can't a solution be agreed on here?

[joelhickok]

Whoops, I meant to post in my last post to, for people forced to use hyphenated props for some reason, and still want reactivity, you can watch the $$props value in your child component. This does work, and you can reassign the $$props properties to internal component variables.

let myValue = null

$: {
    console.log($$props)
    myValue = $$props['my-value']
}

[vercel]

@benmccann is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[benmccann]

I don't think it matters for this PR as it will be superseded by #8457, but next time you should use snake_case for internal variable names to match the existing code style

[dummdidumm]

Closed via #8457, to be released in Svelte 4

[patricknelson]

For clarity and for my future reference (and anyone else landing here): The kebab-case to camelCase conversion will not happen automatically but must instead be explicitly mapped. However, lowercase to camelCase conversion will be done by default (as inspired by Lit per #8457).

For example (tested in svelte@next currently mapped to [email protected]):

<svelte:options
	customElement={{
		tag: "custom-element",
		props: {
			camelCase1: { attribute: "camel-case1" },
		},
	}}
/>

<script>
	export let camelCase1;
	export let camelCase2;
</script>

<h1>{camelCase1} {camelCase2}</h1>

In HTML:

<custom-element camel-case1="hello" camelcase2="world"></custom-element>

In other Svelte components, you'd can still use the typical component and property syntax as usual (which you can now do in v4 even though you're compiling it as a custom element):

<CustomElement camelCase1="hello" camelCase2="world"/>

Resources: Figured this out after some research and testing. See the unit test, the docs (currently in code) and the main comment on #8457.

Finally, thank you so much @dummdidumm et al. for the work on custom elements. This is huge for those of us on alternative/hybrid stacks looking to seamlessly integrate Svelte into our projects! ❤️