Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I created a web component with Vue CLI 3 and Element :

vue-cli-service build --target wc --name my-foo foo.vue
The component makes use of DatePicker and Select from Element, which in turn make use of some old version of popper.js and vue-popper under the covers. The Element source repository includes its own popper.js and vue-popper instead of using npm packages. The popper.js file in Element just says {{version}} so I'm not sure how old it is or if it's been heavily customized by the Element developers. It doesn't look much like the latest popper.js file.
As it is, the included version of Popper ends up throwing errors when a DatePicker or Select are activated inside the web component:
[Vue warn]: Error in callback for watcher "pickerVisible": "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."
Running outside of the Vue CLI generated web component, the Element controls work fine. After some digging, I found that the web component wrapper that Vue CLI 3 generates makes use of shadowRoot, and the developer tools show #shadow-root (open) in the hierarchy when the web component is used at runtime.
Older versions of popper.js used to have issues with shadowRoot, but there is at least one merged pull request from back in 2016 that addresses the problem. It doesn't look like Element contains a version that is able to work properly within a shadow root, which is surprising considering how long ago the issue was fixed, and Element being a Vue-friendly library.
Can anyone suggest a workaround for the shadowRoot issue without giving up style isolation, or a clean way to force Element to make use of the latest vue-popper package instead of its own included version?
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.