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

Attributes/props of custom elements with names starting with "on" are shadowed #14727

Closed
mspears-alaska opened this issue Dec 16, 2024 · 2 comments · Fixed by #14934
Closed

Comments

@mspears-alaska
Copy link

mspears-alaska commented Dec 16, 2024

Describe the bug

When using custom elements as a child of a svelete component in svelte 5, attributes/props starting with 'on' get shadowed by the implicit remapping of on:foo to onfoo. For example, as seen in the repl, a property like oneworld which is expected to be a bool can't be used as a shorthand and returns null as a value even when explicitly setting it as true.

Reproduction

https://svelte.dev/playground/8e97714826aa4a0fb17c5aafef24bdc5?version=5.14.0

Logs

This is the error shown if you try to use the boolean property shorthand

Event attribute must be a JavaScript expression, not a string
https://svelte.dev/e/attribute_invalid_event_handler

e.g. <custom-element oneworld foo={false}></custom-element>

System Info

System:
    OS: macOS 15.1.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 64.33 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm
  Browsers:
    Chrome: 131.0.6778.140
    Edge: 131.0.2903.99
    Safari: 18.1.1
  npmPackages:
    svelte: ^5.11.0 => 5.12.0

Severity

blocking an upgrade

@Ocean-OS
Copy link
Contributor

Perhaps Svelte could treat on-props as regular props for any non-standard elements?
Components don't treat on-props any differently than any other prop, so I don't see why this should be different for custom elements (or maybe instead of treating any attribute starting with on as an event handler, Svelte could have an array of valid HTML events and look for those instead).

@dummdidumm
Copy link
Member

While this is true, the general advice - outside of Svelte, too - is to not use properties/attributes starting with on. All JSX-based frameworks (like React etc) also rely on this convention.

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.

4 participants