From d61ef3daf7777fd28e4af5902912ed2379b5c66e Mon Sep 17 00:00:00 2001 From: Andrew Talbot Date: Fri, 5 Aug 2022 03:00:15 +0000 Subject: [PATCH 1/2] web-components.md - add event handling caveat --- src/guide/extras/web-components.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index 83cf52a665..41a24e2b65 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,30 @@ 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 your app uses custom elements that dispatch events with capital letters, you can use a custom directive to add the correct event listener to the element. + +#### Example Custom Directive to Handle Specific Events + +```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. From 3f5592fa1c315375ec443c842574ec6056e2cb7a Mon Sep 17 00:00:00 2001 From: Andrew Talbot Date: Mon, 29 Aug 2022 11:49:51 -0400 Subject: [PATCH 2/2] Update src/guide/extras/web-components.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/extras/web-components.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index 41a24e2b65..fdd7ebba71 100644 --- a/src/guide/extras/web-components.md +++ b/src/guide/extras/web-components.md @@ -79,9 +79,7 @@ However, there could be rare cases where the data must be passed as a DOM proper 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 your app uses custom elements that dispatch events with capital letters, you can use a custom directive to add the correct event listener to the element. - -#### Example Custom Directive to Handle Specific Events +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.