Hydrated. Then animated.

The six cards below arrived as HTML from .NET. Each is an independent Elmish program that adopts its own markup when the script loads: the nodes stay, and the loops never touch each other. The third arrived inside a shadow root of its own, styles included, which is why the page's card styling stops at its edge. The fourth is the other way round: its shadow root is only a frame with slots, and the card it frames is ordinary light DOM, styled by this page like the two at the top. The last two share one piece of state that only the server knows in time to matter — whether you asked for dark — so it is written into the page below them, and into the html element before any of this was sent. Both islands start from the value their markup was rendered from, neither knows about the other, and the page is never briefly the wrong colour. A seventh card is not an island at all: it is a custom element, which the browser builds and which reads that same state from the store. It arrived drawn like the others, inside its own shadow root, and took that over. The eighth is an island with a component in it. The island adopts its markup and hands the component its level, and only then does the component take over the shadow root that arrived inside its tag. The ninth is a board, an island like the first two that the server draws standing still, and each card on it is a component that drags itself. The dragging, and the gliding from lane to lane, belong to the browser alone.