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

Inline style from Vue componet #214

Closed stoivo closed 4 years ago

stoivo commented 4 years ago

I am abstraction some parts of our app in a web component. I would like them not to inherit any of the CSS from elsewhere so they are isolated. In my understanding, it is best practice for packaged web components to use shadow-root.

To achieve this I want to inline the styles from these components. I have seen this as one option but I want to ask if you have a recommended way of adding this?

I have looked at vaadin as one example of someone who is publishing custom element packages. Here is one example of what they do with the CSS Screenshot 2020-06-24 at 12 41 01

karol-f commented 4 years ago

Hi, solution You gave seems fine, even better than suggested shadowCss option (https://github.com/karol-f/vue-custom-element#options > Example options usage).

Use what is better for You.

E.g. import CSS file (even preprocessed by e.g. Sass) using combination of loaders (with raw-loader or sth similar so You will get text on the end). Than put that text into shadowCss or into solution from link in your comment.