docs
docs copied to clipboard
vuejs
Vue does not perform 100% anymore at Web Components test
On this page: https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue it is said that vue performs 100% at Custom Elements Everywhere test. It seems that the test has changed now. 3 tests failed. Until vue comes back to 100% this line should probably be updated or removed.
I think that, if we switch the tests from
<custom-ce v-on:CusTomCaSes="handler"/>
to
<custom-ce v-on="{ CusTomCaSes: handler }"/>
it may work.
I'll try it tomorrow.
If it works, I'll open a PR to the testing suite (so Vue can keep the 100% score). Either way, it's good to add the caveat somewhere in the Custom Elements section of the docs.
I couldn't still make the tests run on my machine, by, looking at the code, it seems that the event names are indeed converted to camel-case (toHandlers call toHandlerKey), what may break some edge-cases.
A Vue RFC discussed escape hatches to solve this issue, but it seems to not have been implemented.
So I'm favorable, for now, to change the docs.
@skirtles-code I think I'd be in favor of reflecting this current state of affairs in the docs, given that the workaround that I proposed to them is still in concideration but seems to be stuck.
We could reflect the actual current score in the docs and add a small section explaining the workarounds:
- adding the listeners for camelCase, PascalCase and CASPScase events imperatively with a template ref
- adding the listeners for camelCase, PascalCase and CASPScase events decaratively with a small custom directive:
app.directive('event', {
beforeMount((el, { arg, value }) => {
el.addEventListener(arg, value)
}),
unmounted((el, { arg, value }) => {
el.removeEventListener(arg, value)
})
}
<my-custom-el v-event:PascalCase="handleEvent">
That would of course also only work in build-time compilation as string compilation at runtime would lowercase the arg before the compiler processes it.
Thoughts?
