question: internal css - Githubissues

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

question: internal css #168

Closed WouterSchoofs closed 5 years ago

WouterSchoofs commented 5 years ago

Hi,

i'm trying to create a frontend widget that customers can embed into their website. We want to make it possible for our customers to give us an external css for custom css styling in our widget. Also we don't want that our widget-css will overwrite the website css.

The shadow property is not an option for us because with this option we overwrite the css externaly. We can wrap all our css in a specific #div but does anyone else know a better solution?

karol-f commented 5 years ago

You can choose Shadow mode (but with a limited browser support). You can overwrite styles externally - https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat
You can just give it specific class/id and style it normally
Your component styles may be defined with Vue's scoped attribute so it won't leak outside.