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 component compatibility #308

Open
antoine92190 opened this issue Mar 27, 2021 · 0 comments
Open

Web component compatibility #308

antoine92190 opened this issue Mar 27, 2021 · 0 comments

Comments

@antoine92190
Copy link

antoine92190 commented Mar 27, 2021

When using your library inside another library (such as mine: https://github.com/antoine92190/vue-advanced-chat) that will be used in any project as a web component, the line below is throwing an error:

if (typeof this.forceUseInfiniteWrapper === 'string') {
result = document.querySelector(this.forceUseInfiniteWrapper);
}

I managed to fix the issue by doing this instead:

if (typeof this.forceUseInfiniteWrapper === 'string') {
  const component = document.querySelector('vue-advanced-chat');
  if (component) {
    result = component.shadowRoot.querySelector(this.forceUseInfiniteWrapper);
  } else {
    result = document.querySelector(this.forceUseInfiniteWrapper);
  }
}

The component const could be a prop that we are passing to vue-infinite-loading.
Please let me know if you are interested by this fix, I will be happy to make a PR for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant