Cannot export variabiles of webcomponents attributes with kebab-case syntax

[ptkdev]

Please re-open #875, don't work with camelCase export if attribute is kebabCase:

HTML:

<my-component header-text="hello"></my-component>

Svelte file:

<svelte:options tag="my-component" />
<script>
	export let headerText;
</script>

<div>
{headerText}
</div>

<style lang="scss">
</style>

headerText is undefined.

Workaround:

You can use {$$props["header-text"]} but if user change the html attribute, svelte, don't re-render html and webcomponent show always "hello".

Similiar issue: #3852

[antony]

This isn't a similar issue to #3852 , it's the same issue. Hyphenated properties aren't visible because we don't do any conversion between cases, so you have to define the property as either lowercase without hyphens, or camelCase (which won't work with web components).

Either way it's the same issue so I'm closing this one and leaving that one open. Please ensure that you subscribe to it so that you are made aware of any updates.

[roonie007]

@ptkdev For those who needs this so bad, I just created a vite plugin that adds kebab-case support for Svelte components vite-plugin-svelte-kebab-props

[ptkdev]

@roonie007 you are hero!