search

PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.66k stars 366 forks source link

Web component compatibility #308

Open antoine92190 opened 3 years ago

antoine92190 commented 3 years ago

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: https://github.com/PeachScript/vue-infinite-loading/blob/4baed2bb078f076d3bff48c783ed324236630ed6/src/components/InfiniteLoading.vue#L318-L320

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.