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.

Sign up for GitHub

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

Jump to bottom

<svelte:body> tag for popups #1872

Closed
btakita opened this issue Dec 12, 2018 · 5 comments
Closed

<svelte:body> tag for popups #1872

btakita opened this issue Dec 12, 2018 · 5 comments

Comments

@btakita
Copy link
Contributor

btakita commented Dec 12, 2018

<svelte:body> could be a convenient way to append elements to the body as direct children, enabling popup dialogs.
@Conduitry
Copy link
Member

This came up before in #1133 - At the time, my main concern with it was complications to SSR, and I don't think anything has changed on that front. I'm not against this, the SSR implications are just something that needs to be borne in mind.

@btakita
Copy link
Contributor Author

btakita commented Dec 12, 2018

For the popup case, I think it's ok to not render SSR; as the SSR content would load first, then the popup would be activated when rehydrated with state.

@btakita
Copy link
Contributor Author

btakita commented Dec 12, 2018 •
edited
Loading

Maybe there can be a placeholder (e.g. in the template %sapper.body%) at the end of body which will fill in the content of the <svelte:body> instances. As the other components are SSR'd, the buffer for %sapper.body% can be filled.

On that note, would it make sense to have arbitrarily named placeholder buffers for the template? This would allow something like:

<body>
  %sapper.html_prefix%
  <div id='sapper'>%sapper.html%</div>
  %sapper.html_postfix%
</body>

@btakita btakita mentioned this issue Dec 12, 2018
Open
@Conduitry
Copy link
Member

Closing as dupe of #1133.

@tuckergordon
Copy link

A quick workaround for anyone else dealing with this is to create a wrapper <Overlay> component that adds an overlay-container to the <body>. I needed this in a project because the element launching the popup was inside of an element that was being transformed.

REPL here

Overlay.svelte

<script>
  import { onMount } from 'svelte';

  let overlay;

  onMount(() => {
    let container = document.getElementById('overlay-container');
    if (!container) {
      container = document.body.appendChild(document.createElement('div'));
      container.id = 'overlay-container';
    }
    container.appendChild(overlay)
  });
</script>

<div bind:this={overlay} class="overlay">
  <slot />
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@btakita @tuckergordon @Conduitry