Svelte: Portal

[meiseayoung]

is there some thing like ReactDOM.createPortal(child, container) in svelte3 ?

[MaxMilton]

https://github.com/sveltejs/svelte/issues/1849 ?

[langbamit]

@MaxMilton How about event-bubbling-through-portals ?

[meiseayoung]

1849 ?

no, that case for Svelte2

[ThomasJuster]

Hi there, here's how you can do it:

<script>
// src/components/Portal.svelte
import { onMount, onDestroy } from 'svelte'
let ref
let portal

onMount(() => {
  portal = document.createElement('div')
  portal.className = 'portal'
  document.body.appendChild(portal)
  portal.appendChild(ref)
})

onDestroy(() => {
  document.body.removeChild(portal)
})

</script>

<div class="portal-clone">
  <div bind:this={ref}>
    <slot></slot>
  </div>
</div>
<style>
  .portal-clone { display: none; }
</style>

[meiseayoung]

Hi there, here's how you can do it:

<script>
// src/components/Portal.svelte
import { onMount, onDestroy } from 'svelte'
let ref
let portal

onMount(() => {
  portal = document.createElement('div')
  portal.className = 'portal'
  document.body.appendChild(portal)
  portal.appendChild(ref)
})

onDestroy(() => {
  document.body.removeChild(portal)
})

</script>

<div class="portal-clone">
  <div bind:this={ref}>
    <slot></slot>
  </div>
</div>
<style>
  .portal-clone { display: none; }
</style>

nice answer,thx a lot

[thojanssens]

@ThomasJuster

What is the purpose of the wrapping 'portal' element? Just curious.

Could be:

onMount(() => {
  document.body.appendChild(ref)
})

onDestroy(() => {
  document.body.removeChild(ref)
})

No?

[thojanssens]

For some reason, when the container doesn't include the previously added element, I will have the error:

TypeError: Cannot read property 'removeChild' of null

when using my version.

This error doesn't happen using @ThomasJuster 's solution