Passing data to properties that use camel case names in svelte/sveltekit

[OvidijusParsiunas]

Hi, when working with the Svelte/SvelteKit frameworks - passing data into lit elements generally works fine, however I am experiencing issues when attempting to pass data from state into my element's properties that use camel cases for their names.

Example:

<script>
    const localObject = {...}
</script>
<main>
  
<custom-lit-element
    property={content} // this property passes the object
    camelProperty={content} // this property passes null
></custom-lit-element>
</main>

As a workaround I can use the following approach, however this does not work well for passing functions as they don't keep state to the rest of the component:

camelProperty={JSON.stringify(content)} 

What is happening here is that Svelte is automatically lower casing the property names and because they no longer match the expected property names - they are assumed to be attributes (hence the stringified approach works). This is also evident by the following line in their codebase:

else if (node.getAttribute(attribute) !== value)node.setAttribute(attribute, value);

I was wondering if there is any way to pass data into properties with camel cases using Lit Element.

Here is a live example where passing values into a property called frameComponentsStyles can only be done when it is stringified. For reference frameComponentsStyles is a simple property that is set up using the following code where FrameComponentsStyles type is an object:

@property({type: Object})
frameComponentsStyles: FrameComponentsStyles = {};

Thankyou for your feedback!

[justinfagnani]

I thought this would have been covered by custom-elements-everywhere.com, but apparently all the property binding tests use lower-case-only names: https://github.com/webcomponents/custom-elements-everywhere/blob/main/libraries/svelte/src/components/ComponentWithProperties.svelte

Even so, looking at the Svelte code I'm not sure that this is an issue with camelCase property names. The attr() function you linked to never sets properties at all, and we know that Svelte sets properties in some cases. The function where attr() is called from appears to be set_attributes(), which checks for the presence of the property on the prototype and sets if it exists.

I can see a bug there where the property logic only kicks in for own properties of the prototype though, so this logic won't work for inherited accessors. That could be done to avoid setting properties for accessors on HTMLElement, but it breaks inheritance.

But don't see this inheritance pattern in ActiveTable - frameComponentsStyles is defined right on the class.

The only other things I could think of are

1. That there's some kind of proxy in front of ActiveTable that makes it not the direct prototype, but that doesn't appear to be the case
2. There's some timing issue where <active-table> isn't defined when the property/attribute is set so the prototype check fails and Svelte sets an attribute. I didn't see a quick way to check for that in that sandbox. I think we'd need to use a bespoke custom element to diagnose that.

[OvidijusParsiunas]

Thanks again for your work @dummdidumm!

[OvidijusParsiunas]

The camelCase issue that I was facing has now been resolved.

I know that there is a PR that includes tests for inherited properties and I have raised another PR to bump up the tested Svelte version, so I'll wait for @justinfagnani's word before closing this discussion.

I really appreciate all the effort you've put into this folks!

[OvidijusParsiunas]

Interestingly the build failed for that PR failed, I'll wait for further comments before taking any action.

[OvidijusParsiunas]

Hey folks, there haven't been any updates on this for a while and the core objective of this discussion has already been accomplished, therefore I am going to be closing this discussion.

If there is anything else that needs to be done, feel free to comment or re-open the discussion as needed.

Once again, thank you for all the work you've put into this, I really appreciate it!

[justinfagnani]

Thanks for raising the issue @OvidijusParsiunas !