is-land

A new performance-focused way to add interactive client-side components to your web site.

Or, more technically: a framework independent partial hydration islands architecture implementation.

Features:

Examples:

Standalone

This is a control to make sure the component initializes as expected without an island.

Vanilla web component

Defaults

These islands are eagerly loaded and initialized.

Vanilla web component

Gnarly nesting

Vanilla web component 1a Vanilla web component 1b Vanilla web component 1c Vanilla web component 1d

Testing A

Vanilla web component 2

Testing B

Vanilla web component 3

Scroll down


on:visible

Vanilla web component

Works with <details>

The child content in this <details> will not be initialized until you open it Vanilla web component

on:visible nested group

Parent island has on:visible but none of the child components have an explicit loading condition. They will inherit the loading conditions of all of the ancestors.

Vanilla web component Here’s a nested island: Petite Vue

on:idle

Vanilla web component Vanilla web component Vanilla web component Vanilla web component Vanilla web component Vanilla web component Vanilla web component Vanilla web component Vanilla web component Vanilla web component

on:interaction

Requires one of: touchstart, click.

Note here that we used one parent island to group both of these components, and interacting with either initializes the whole group.

Petite Vue Vanilla web component

Use on:interaction="mouseenter,focusin" to override the events.

Petite Vue Vanilla web component

In this example we use a third party web component (<details-utils>) without any code changes made to the component. Note that children here are maintained before and after initialization (e.g. click the summary to expand before init and it keeps that state after init).

Toggle Menu (Default open: click outside to close after island initializes)

Note that interacting with content inside of the menu works without closing the menu.

Toggle Menu (Default closed: will toggle before island initializes)

Note that interacting with content inside of the menu works without closing the menu.

on:media

Viewport size

on:media="(min-width: 64em)"

This only runs when the viewport is greater than or equal to 1024px wide: on:media="(min-width: 64em)"

Vanilla web component

This only runs when the viewport is less than 1024px wide: on:media="(max-width: 63.9375em)"

Vanilla web component

Reduced Motion

This runs when the user prefers reduced motion: on:media="(prefers-reduced-motion)"

Vanilla web component

This runs when does not have a reduced motion preference: on:media="(prefers-reduced-motion: no-preference)"

Vanilla web component

on:save-data

This runs when the user has Save Data enabled:

Vanilla web component

on:save-data="false" This runs when the user does not have Save Data enabled:

Vanilla web component

Controlling fallback content

If you put child content in a <template> it will be JavaScript-only (no fallback). Use this to your advantage! You can mix and match <template> with other progressively enhanced content in the island.

Vanilla web component (JS not required for fallback content)

Use the ready attribute on <is-land> (added when the island is hydrated) for additional styling!

When hydrated the text turns bold and the clock goes away

Use data-island="replace" to replace the island content with the template. If more than one of these exists in an island, only the first is used.

This content is pre-JS. This is where your loading spinner goes 😈

Do you know the aspect ratio of the hydrated content? On my personal web site I use this to hydrate a <lite-youtube> component. Works great with CSS aspect-ratio!

Custom Lazy Asset Loading

Nest any inline <script>, <script src>, <style>, <link rel="stylesheet"> inside a <template data-island> to execute when conditions are met. The text will turn red when the inline CSS loads and bold when the external stylesheet loads.

Once per page template

Group 1

Each of these islands has a console.log but you should only see one. Each of these islands has a console.log but you should only see one. Each of these islands has a console.log but you should only see one.

Group 2

Each of these islands has a console.log but you should only see one. Each of these islands has a console.log but you should only see one. Each of these islands has a console.log but you should only see one.