search

EranGrin / vue-web-component-wrapper

vue3 - web component wrapper plugin
https://erangrin.github.io/vue-web-component-wrapper/
59 stars 7 forks source link

Vuetify icon don't work with shadow-DOM #34

Closed SAntoineS closed 2 months ago

SAntoineS commented 3 months ago

Hi, I followed this tutorial to create Vuetify app.

It work well but I have a issue with icons. I've downloaded "@mdi/font": "^7.4.47", like the official docs and same files and same imports than your docs.

The problem is that I use this web component in a complex Vaadin project with a lot of CSS.

With the shadowDOM by default at false of createWebComponent and I can't see any icons (in combobox either). But if I disable the shadoDOM with true all works fine. But in the Vaadin project it's impossible to have the component without shadowDOM.

Do you have any thought about it ?

Do you need some code ?

It could help It could help too

Thanks, Antoine

EranGrin commented 3 months ago

Hi there, I'll be back from holiday in 15 days, until then, my internet connection is quite low. You can try to create a stackblitz demo that present the issue

SAntoineS commented 2 months ago

Hey @EranGrin !

I updated the issue, I figured out that was a shadowDOM problem.

Your default Vuetify demo on your docs have the issue.

EranGrin commented 2 months ago

@SAntoineS means this issue can be closed? Can you point me to the issue you mentioned?

SAntoineS commented 2 months ago

@SAntoineS means this issue can be closed? Can you point me to the issue you mentioned?

No I still have the problem, I just discovered it was related to the ShadowDOM.

I meant this issue where we are now. (https://github.com/EranGrin/vue-web-component-wrapper/issues/34#issue-2477993968)

EranGrin commented 2 months ago

Apologize for the delayed response, but I only now found the time to tackle this.

The vuetify demo should contain the icons now

https://stackblitz.com/~/github.com/EranGrin/vuetify-web-component-wrapper?file=src/style.css I just had to add the icon css to the main style css file

EranGrin commented 2 months ago

@SAntoineS let me know if I can close this issue

SAntoineS commented 2 months ago

@EranGrin

Thanks no problem for the delay I understand.

I had found this temporary solution by adding directly in the cssFrameworkStyles like : cssFrameworkStyles: [style, materialIcons],

But I think it's a cleaner way to import icon css in style.css

Thanks !