Home | Hello world | Component | Pursx 1 | Events 1 | Effects | Pursx 2 | Events 2 | Portals | SSR |

Portals

Zapping from place to place

Sometimes, we have referentially opaque nodes like videos or audio that we can't destroy and recreate when they need to move around the DOM. In these cases, we can use portals to "zap" nodes from one part of the DOM to another.

The code below uses portals to flip two videos across a boundary. If you press play on either video, you'll see that it keeps playing uninterrupted, event when it is removed and reinserted.

And here's what it produces:

Events of portals

Portals work by sending a referentially-opaque reference to a DOM element into a closure where it can be safely used. Whenever an event is emitted containing the element, the element will be rendered at that place in the DOM, as in the example above. Note that portals "hog the blanket", meaning that they end up in the last place in which they were called.

switcher is a small function included in Deku to switch between different elements in an enclosure. It's how the tabs in this documentation are implemented as well.

Next steps

In this section, we used portals to move an element to different areas of the DOM. In the next section, we'll learn how to do static site rendering.