Styles are injected in the document head instead of in the ShadowRoot when building a custom element #8254
Description
Describe the bug
When using primevue components inside custom elements using defineCustomElement from Vue, the styles are injected dynamically in the document head. Because custom elements are encapsulated when using the shadowRoot, the styles are not applied to the primevue components inside the custom elements.
Pull Request Link
Reason for not contributing a PR
- Lack of time
- Unsure how to implement the fix/feature
- Difficulty understanding the codebase
- Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/primevue-4-vite-issue-template-wztsp5df?file=src%2FApp.vue
Environment
Latest version of MacOs, Cursor, Node, pnpm, Vue and primevue
Vue version
3.5
PrimeVue version
4.4.1
Node version
22
Browser(s)
No response
Steps to reproduce the behavior
- Update vite configuration to create a custom element of your vue app.
- Update the index.html to add your custom element
- Inspect the document to locate the primevue styles
- Styles are added to the document head
Expected behavior
Styles are added to the custom element shadow dom