Web Components Support

[serbemas]

The 'click-outside' Vue directive is not working when using it inside a web component.

In order to mantain the web components encapsulation principle, when the ‘click’ event is triggered from an element that is inside of the “#shadow-root”, the browser retargets the event to the host element of the shadow dom.

For example, clicking the element <p data-v-9b69508e=""> I'm a web component</p>, the e.target code returns <my-web-component> as clicked element:

So the problem is the e.target code that is retargeted to the host element.

To solve this, we can use instead the e.path[0] code to get the clicked element to add support to use it inside web components.

[jamogon]

I have the same problem.

With this solution the library works fine inside a web component.

[iamstevendao]

@serbemas Thank you, you are legend!