search

DJanoskova / Vuidget

A full-functioning Vue.js (routes, actions, state management..) embeddable widget in HTML
https://vuidget.netlify.com
213 stars 47 forks source link

How to deal with conflicting CSS? #1

Open mikemassari opened 6 years ago

mikemassari commented 6 years ago

Hello! Love the idea of the Vuidget. My only problem is conflicting CSS. I noticed you still use app as a root element and I am afraid that "host" application may overwrite the widget CSS.

Do you have any system in place to prevent this? I was thinking maybe a webpack prefixer or something that would impede the host and the widget CSS to conflict.

DJanoskova commented 6 years ago

Hi!

I guess it depends what your widget is for. Let's say you're using bootstrap classes in your widget and when you embed the widget in a site that uses bootstrap as well (let's say some kind of custom, altered version), it's good if it inherits the site's styling, because then it matches the other parts of the site.

Or you can always use scoped styles when you're building your widget/app. The Vuidget repo is just an example repository that shows how to set up main.js and webpack config to disable .js and .css chunks, but everyone can build their app the way they prefer.

I have to admit, I'm not too advanced in working with webpack. I'm sure some prefixer would be a nice idea, but I guess if anyone needs it they will find out how to get it done.

I'm sorry for not providing much of an answer, however I'm a fan of letting people style their own content to adjust it for the site.

Wishing you a great day, Dana