Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
n4ks opened this issue Sep 2, 2022 · 4 comments · May be fixed by 0xSebin/DaybydayCRM#3 or Omonullo/trabsit#5
Closed

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

n4ks opened this issue Sep 2, 2022 · 4 comments · May be fixed by 0xSebin/DaybydayCRM#3 or Omonullo/trabsit#5
Labels
bug released

Comments

@n4ks
Copy link

n4ks commented Sep 2, 2022

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 :root pseudo-class
    image
  2. with :host pseudo-class
    image
@n4ks n4ks added the bug label Sep 2, 2022
@gazben
Copy link

gazben commented Dec 13, 2022

Did you find a solution to this?

@gazben
Copy link

gazben commented Dec 13, 2022 •
edited
Loading

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
Copy link
Owner

@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.

@kimulaco kimulaco mentioned this issue Dec 28, 2023
Merged
@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 3, 2024

🎉 This issue has been resolved in version 3.20.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@0xSebin 0xSebin mentioned this issue Aug 30, 2024
Open
@Omonullo Omonullo mentioned this issue Nov 5, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug released
Projects
None yet
Milestone
No milestone
3 participants
@sagalbot @gazben @n4ks