vue-select.css styles are not applied to the web component

[n4ks]

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

• Vue Version: 2.6.14
• Vue Select Version: 3.20.0

Describe the bug When I work on a project in dev mode there is no problem, but as soon as I build an application as a web component, the styles are not applied. I managed to find that the problem is that the css variables in the vue-select.css file are in the :root pseudo-class and if I replace it with :host everything works fine. Honestly I have no idea how to fix this without changing the library styles manually.

Steps To Reproduce

1. import vue-select.css (In my case, I do this in the scss file - @import 'vue-select/dist/vue-select.css';)
2. Build project : "build": "vue-cli-service build --target wc --name weather-widget ./src/components/weather-widget.vue"
3. Next I will attach two screenshots that show the difference in component behavior.

I also want to note that not only the styles that I override are broken, but in general all of the styles that use css variables from the file vue-select.css

Expected behavior Styles are applied after the web component is built.

Screenshots

1. with :rootpseudo-class
2. with :host pseudo-class

[gazben]

Did you find a solution to this?

[gazben]

Okay so the problem is the css variable overrides Explanation: https://stackoverflow.com/a/53240578

My code that solved the issue:

<script lang="ts">
import 'vue-select/dist/vue-select.css'
</script>

<style scoped>
.v-select::v-deep {
  --vs-controls-color: rgba(255, 255, 255, 0.2);
</style>

[sagalbot]

@n4ks I don't have any experience with web components unfortunately. If you could provide a https://codesandbox.io to demonstrate, that'd be much appreciated and maybe I can get that fixed.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.20.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: