feat(portal): enable global 'body' override for Portal's `appendTo`

[patroza]

From Discord, as described, a way to override the 'body' element for Portal, so that e.g when one builds components that may be used inside web components, portals can be created within another web component that contains the required styles. This is necessary because the host page won't contain the styles that are generally expected by components that use portals. (e.g Toast, Menu and Dialog).

main:

customElements.define("x-portal", defineCustomElement(PortalCeVue))
document.body.appendChild(document.createElement("x-portal"))

Portal.ce.vue:

<template>
   <div ref="root"></div>
</template>
<script setup lang="ts">
// import styles, or use <style>
import { onMounted, ref } from "vue"

const pv = usePrimeVue()

const root = ref()
onMounted(() => {
 pv.config.appendTo = root.value
})
</script>

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		Jan 29, 2024 8:27pm

[mertsincan]

Hi @patroza,

Great, we already added this to PrimeReact. Can you change the name of the option like in PrimeReact? https://primereact.org/configuration/#appendto Also, this can be a config like PrimeVue.appendTo;

app.use(PrimeVue, { appendTo: ... });

[mertsincan]

And could you please create an issue with 'new feature' label for it? Thanks a lot for your contribution!

[patroza]

Hi @patroza,

Great, we already added this to PrimeReact. Can you change the name of the option like in PrimeReact? https://primereact.org/configuration/#appendto Also, this can be a config like PrimeVue.appendTo;

app.use(PrimeVue, { appendTo: ... });

Hi @mertsincan, thanks, I've made the adjustment and created the discussion here, not sure how to add a label, don't see the usual option for it. https://github.com/orgs/primefaces/discussions/1053

[vercel[bot]]

Deployment failed with the following error:

The provided GitHub repository does not contain the requested branch or commit reference. Please ensure the repository is not empty.

[geminigeek]

hi, this is very interesting, trying to use primevue in a content script of a chrome extension, seems its missing in primevue , something like this is available here https://primereact.org/configuration/#appendto