Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mixed case custom element properties are unsupported #5184

Closed
socsieng opened this issue Jul 22, 2020 · 2 comments
Closed

Mixed case custom element properties are unsupported #5184

socsieng opened this issue Jul 22, 2020 · 2 comments

Comments

@socsieng
Copy link

Describe the bug
Heuristics used to determine whether a custom element's property or attribute should be set doesn't support properties with mixed case names.

Example:

<my-element myProperty={obj} other={obj} />

Logs
N/A

To Reproduce
https://svelte.dev/repl/f39a2c0f7f4443a48fab079db1884fa3?version=3.24.0

Expected behavior
A clear and concise description of what you expected to happen.

Expected output to include plain element with no attributes set:

<my-element />

And with properties set for myProperty and other.

Actual behavior

<my-element myproperty="[object Object]" />

Because no property exists on the element with lowercase property, it gets added as the attribute myproperty and the obj is coerced to string.

Stacktraces
Not available

Information about your Svelte project:

  • Your browser and the version: Chrome 84.0

  • Your operating system: macOS Catalina

  • Svelte version: 3.24.0

  • Whether your project uses Webpack or Rollup: REPL

Severity
I'm in the early stages of evaluating Svelte and not being able to set properties on custom elements will is preventing it from being used.

Additional context
N/A

@stale
Copy link

stale bot commented Dec 24, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@dummdidumm
Copy link
Member

This behavior is correct and in line with how other custom element libraries like Lit do it. In general, DOM attributes are case insensitive and therefore custom element attributes, too - therefore anything is lowercased and then searched for a corresponding prop. With #8457 you'll be able to use kebab-case instead if you want to - closing.

@dummdidumm dummdidumm closed this as not planned Won't fix, can't repro, duplicate, stale Apr 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants