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 arrived empty, because it is not an island at all: it is a custom element, the browser builds it, and it reads that same state from the store.