Use a Vue directive for event listening

[rictic]

@justinfagnani would appreciate your review too

I'm a bit torn about whether to count this towards Vue's score. On the one hand, it's custom imperative code, and of course any framework can work with custom imperative code. On the other hand, it's a tiny amount of code, and with it, it's just as easy and ergonomic as the built-in v-on syntax.

[rictic]

See discussion at https://github.com/vuejs/core/issues/5401#issuecomment-1041214293

[github-actions[bot]]

Preview this PR: https://custom-elements-everywhere.com/preview/preview/preview/1406/

[justinfagnani]

I don't think this should count as 100% on this particular test. Most frameworks can interoperate with APIs ones you drop to imperative code. React can use refs to set properties and listen for events. It help if you can wrap the imperative code in a reusable abstraction, but it's still a potential cost to using an element. I'm actually not aware of a common framework where you couldn't use some feature with an imperative workaround.

That said, I'm not sure that all these tests should be weighted equally. Some of these are edge or rarer cases here for completeness. I don't know how we'd estimate this well, but I'm sure that lower and kebab-case event names are the vast majority of event names (though MWC attempted to use mixed-case event names for a bit?). It doesn't seem right that a mixed-case event test should carry near the same weight as kebab-case or being able to set properties.

[rictic]

React can use refs to set properties and listen for events.

Yeah, but if there was an 8-line bit of code you could drop into any React app to get a great developer experience for working with props and events in React, that'd be very different than the status quo, yeah?

Like, it's not great that you can't use v-on, but v-event is very chill, and you can add it at the application level too.

I suppose that's a pretty good argument for adding it as a built in directive rather than making it custom though, so that it's standard and easy to google at least.

[edimitchel]

This is now fixed since the version 3.2.38 of Vue.

PR for the version update: https://github.com/webcomponents/custom-elements-everywhere/pull/2074

[rictic]

Super happy with the fix on the vue side!