search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

use external library with shadow DOM #242

Closed mhubertm closed 3 years ago

mhubertm commented 3 years ago

I would like to import some other library like vue-loading-skeleton which has own components, CSS. How to use them with shadow DOM?

main.js

import Skeleton from 'vue-loading-skeleton';
Vue.use(Skeleton);

Then usage - unfortunately it does not work. I have tried to run it on the example project "vue-custom-element-shadow-examples"

I see that element added by library with class pu-skeleton didn't added attribute data-v-4ed355a8 image

karol-f commented 3 years ago

Can You please prepare CodeSandbox with example?

mhubertm commented 3 years ago

@karol-f here you are: https://codesandbox.io/s/vue-custom-element-with-external-library-e35z6

I see that element created by external library does not add scopeId attribute - thats why styles are not applied.

SOLUTION Indeed there was issue with importing external styles was <style scoped src="../../node_modules/vue-loading-skeleton/dist/vue-loading-skeleton.css"> should be just <style src="../../node_modules/vue-loading-skeleton/dist/vue-loading-skeleton.css">

karol-f commented 3 years ago

I've try to look at it later, but now I assume you just have to usenit like e.g. store. Please look at e.g. https://github.com/karol-f/vue-custom-element/issues/177#issuecomment-529488381 or https://github.com/karol-f/vue-custom-element/issues/32#issuecomment-315058917