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

Polymer's declarative event listener names have issues with casing #4888

Open
sorvell opened this issue Oct 17, 2017 · 5 comments
Open

Polymer's declarative event listener names have issues with casing #4888

sorvell opened this issue Oct 17, 2017 · 5 comments
Assignees
Labels

Comments

@sorvell
Copy link
Member

@sorvell sorvell commented Oct 17, 2017

Polymer adds event listeners to elements declaratively using attribute names in HTML as input. For example, <a on-click="foo"> in an element template adds a listener as if the user did: <a>.addEventListener('click', e => this.foo(e)).

Since HTML attribute names are not case sensitive, supporting any casing requires a convention. For properties Polymer does dash->camel casing to map attribute names to properties names (foo-bar becomes fooBar) but it does not do this for events. Notably Polymer notification events include dashes (e.g. name-changed) so we expect lots of user code relies on this convention.

This means that it's currently not possible to declaratively listen to events like camelEvent, CAPSEvent, or PascalEvent.

We could consider introducing a new syntax to support this. A couple of options:

  • Use _ in events to indicate "remove the _ and replace the next character with uppercase".
  • Add a special attribute name like polymer-events within which the value is used to declare events like `polymer-events="lowercaseevent: handler1, cameEvent: handler2, CAPSEvent: handler3" ...

This will cause Polymer to fail ~6 tests (as of this issue) at https://custom-elements-everywhere.com/

@JosefJezek
Copy link

@JosefJezek JosefJezek commented Apr 18, 2018

@sorvell @TimvdLippe any progress?

@TimvdLippe
Copy link
Contributor

@TimvdLippe TimvdLippe commented Apr 18, 2018

No progress yet. The desired solution is still under discussion. The root issue is that this how the platform currently works and we have not decided how to address this (whether to solve it in the platform or in Polymer specifically)

@robdodson
Copy link
Contributor

@robdodson robdodson commented Apr 18, 2018

After seeing that a few other libraries on custom-elements-everywhere trip over this I've started just using all lowercase event names with no separators. It looks messy, but it does match how the platform does most modern events like touchstart and pointerdown.

@esprehn
Copy link

@esprehn esprehn commented Jun 13, 2018

fwiw my understanding when working on specs was that all future events will be all lowercase. Ex. See fetch observer events.

@stale
Copy link

@stale stale bot commented Mar 13, 2020

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.

@stale stale bot added the wontfix label Mar 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.