diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index 83cf52a665..fdd7ebba71 100644 --- a/src/guide/extras/web-components.md +++ b/src/guide/extras/web-components.md @@ -6,7 +6,7 @@ We consider Vue and Web Components to be primarily complementary technologies. V ## Using Custom Elements in Vue -Vue [scores a perfect 100% in the Custom Elements Everywhere tests](https://custom-elements-everywhere.com/libraries/vue/results/results.html). Consuming custom elements inside a Vue application largely works the same as using native HTML elements, with a few things to keep in mind: +Consuming custom elements inside a Vue application largely works the same as using native HTML elements, with a few things to keep in mind: ### Skipping Component Resolution @@ -75,6 +75,28 @@ However, there could be rare cases where the data must be passed as a DOM proper ``` +### Handling Events with Capital Letters + +The `v-on` directive handles lowercase and kebab-case events dispatched from custom elements. However, the `v-on` directive does not support listening for events whose names include capital letters. For example, adding `v-on:myInput` to a custom element adds a listener for events with the name `my-input`, which does not handle an event with the name `myInput`. + +If you use custom elements that dispatch events with capital letters, you can use a custom directive to add the correct event listener to the element: + +```js +// ex. +app.directive('event', { + beforeMount(el, { arg: eventName, value: handler }) { + el.addEventListener(eventName, handler) + }, + beforeUnmount(el, { arg: eventName, value: handler }) { + el.removeEventListener(eventName, handler) + } +}) +``` + +**See also:** + - [Custom Directives](/guide/reusability/custom-directives.html) + - [Built-in "v-on" Directive](/api/built-in-directives.html#v-on) + ## Building Custom Elements with Vue The primary benefit of custom elements is that they can be used with any framework, or even without a framework. This makes them ideal for distributing components where the end consumer may not be using the same frontend stack, or when you want to insulate the end application from the implementation details of the components it uses.