Skip to content

Mixed case custom element properties are unsupported #5184

Closed as not planned
Closed as not planned
@socsieng

Description

@socsieng

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions