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.

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

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

patroza
Copy link

@patroza patroza commented Jan 23, 2024

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>

Copy link

vercel bot commented Jan 23, 2024

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

@patroza patroza marked this pull request as ready for review January 23, 2024 19:30
@patroza patroza changed the title feat: Portal - enable global 'body' override for Portal's appendTo feat(Portal): enable global 'body' override for Portal's appendTo Jan 24, 2024
@patroza patroza changed the title feat(Portal): enable global 'body' override for Portal's appendTo feat(portal): enable global 'body' override for Portal's appendTo Jan 24, 2024
@mertsincan
Copy link
Member

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 mertsincan added the Resolution: Needs Revision The pull request can't be merged. Conflicts need to be corrected or documentation and code updated. label Jan 28, 2024
@mertsincan mertsincan added this to the 3.49.0 milestone Jan 28, 2024
@mertsincan
Copy link
Member

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

@patroza
Copy link
Author

patroza commented Jan 29, 2024

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

Copy link

vercel bot commented Jan 29, 2024

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.

@tugcekucukoglu tugcekucukoglu modified the milestones: 3.49.0, 3.50.0 Feb 23, 2024
@tugcekucukoglu tugcekucukoglu modified the milestones: 3.50.0, 3.51.0 Mar 15, 2024
@tugcekucukoglu tugcekucukoglu modified the milestones: 3.51.0, 3.53.0 Apr 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Needs Revision The pull request can't be merged. Conflicts need to be corrected or documentation and code updated.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants