Svelte: Web components passing prop camel case

user_4282901 0
Viewed 1061

I am using web components generated by svelte. I have props defined in camel case (someType) and the expectation was that the following should work but doesn't

<my-web-c some-type="stringVal"></my-web-c>

Is this to be expected? Are there any options by which this can work?

I am aware that passing props as snake case and plain values does work like in JS (some_type)

<my-web-c some_type="stringVal"></my-web-c>

or in JS (sometype)

<my-web-c sometype="stringVal"></my-web-c>

But was curious about the camel case.

web-component svelte-3 svelte
2 Answers

You can just use a camel case prop like this:

<my-web-c someType="stringVal"></my-web-c>

This REPL shows different props types in action. Kebab-case isn't currently supported. There is an issue open for it here.

user_13909270

Passing camel case prop just works only in svelte components. It doesn't work with custom elements.

You can use as below;

<my-web-c samplecomp = 'Sample Comp'></my-web-c>
<my-web-c sample_comp = 'Sample Comp'></my-web-c>

user_95578540
Related