Skip to content

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

@mspears-alaska

Description

@mspears-alaska

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

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