Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web Components Support #92

Merged
merged 1 commit into from Jun 10, 2019
Merged

Web Components Support #92

merged 1 commit into from Jun 10, 2019

Conversation

@serbemas
Copy link
Contributor

serbemas commented Jun 9, 2019

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.

image

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:

image

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.

@serbemas serbemas mentioned this pull request Jun 9, 2019
@jamogon

This comment has been minimized.

Copy link

jamogon commented Jun 10, 2019

I have the same problem.

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

@iamstevendao iamstevendao merged commit 7535058 into EducationLink:master Jun 10, 2019
@iamstevendao

This comment has been minimized.

Copy link
Member

iamstevendao commented Jun 10, 2019

@serbemas Thank you, you are legend!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.