Skip to the demo 11ty Demo

is-land

A framework independent partial hydration islands architecture implementation.

is-land Nested Stress Test

  1. Viewports smaller than 800px width will initialize the outer island.
  2. After #1 is satisfied, viewports larger than 1200px will initialize the second inner island.
  3. After #1 and #2 are satisfied, a click will initialize the third inner island.
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px
<800px
>1200px
<test-element> >1200px