Inline style from Vue componet

[stoivo]

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

[karol-f]

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.