Scoping styles inside components

UI Components for Vue
Post Reply
alayadesignsystem
Posts: 4
Joined: 31 Jan 2022, 23:26

26 May 2022, 21:52

Is there a reason styles are not scoped in the components? I think this is fine for 99% of people using PrimeVue, but I think this could cause issues for companies with a microfrontend architecture because micro frontends could have a different version of primevue and the styles from a micro frontend could affect the other.

Example of what it is right now:
<style>
.p-autocomplete {
display: inline-flex;
position: relative;
}
</style>

Example of what I think it should be:
<style scoped>
.p-autocomplete {
display: inline-flex;
position: relative;
}

</style>
Deep selector can be used to affect the styles of child components.

tugce.kucukoglu
Posts: 404
Joined: 23 Oct 2020, 09:28

01 Jul 2022, 13:42

I agree. It possible for all libraries not just PrimeVue. As you could see in the docs, there is `appendTo` property and the default value is 'body'. Scope styling wont' be the ultimate solution.

otis
Posts: 1
Joined: 02 Jul 2022, 03:44

02 Jul 2022, 03:47

When scoping styles inside a component, the rules are applied once and only once per component instance pokedle This means no matter how many instances of that component there are, they all have the same style rules. In contrast, when scoping styles outside a component, the rules are applied for every instance of that component. This means if there are 1000 instances of a component in an application, then every single one of them will have its own separate set of style rules. fnaf

tugce.kucukoglu
Posts: 404
Joined: 23 Oct 2020, 09:28

26 Jul 2022, 13:35

Thanks for the great explanation. It would be very useful for the community.

We're open the new ideas to add some styles for components that appended the body.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest