Scoping styles inside components

[alayadesignsystem]

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]

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.

[tugce.kucukoglu]

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.

[Skalla]

What about appendTo in SideBar? It seems the SideBar can only live on the body? In my case I want it on a custom div.

[tugce.kucukoglu]

There is a new 'pt' property for this purpose. For example: https://primevue.org/sidebar/#pt.demo