<is-land> Web Component

This web component originally shipped May 2022 but was conspicuously missing from my web site.

<is-land> enables Islands Architecture* on any web site. It’s an HTML web component. It has zero dependencies. It doesn’t require any server-side or build integration.

*with credit to Katie Sylor-Miller.

I use this web component everywhere—it’s a good one. Astro’s has popularized Islands Architecture (great!) and this component serves as a build-independent decoupled alternative.

If you aren’t yet familiar, Islands Architecture (apologies for this oversimplification) is turbo-charged lazy loading. It’s a way to initialize components and resources for sections (islands) of your web site when certain conditions are met: the island becomes visible, the page is idle, the viewport is a certain size, on events (click, mouseover, etc), and respecting user preferences (save data, reduce motion, etc).

• An overwhelming number of Demos
• Source code
• Documentation on 11ty.dev

You can use this with JavaScript component frameworks but it’s primarily intended for use with Web Components.

Usage

Say you have a my-component.js web component definition file with the following content:

// my-component.js
customElements.define("my-component", class extends HTMLElement {
	// …
});

You can reference it on your web site like this:

<!-- Make sure is-land.js is first -->
<script type="module" src="is-land.js"></script>
<script type="module" src="my-component.js"></script>

<is-land on:visible on:idle>
	<my-component>Fallback content.</my-component>
</is-land>

Now any web components inside the <is-land> (that were not yet :defined when is-land.js loaded) will delay their initialization until the loading conditions are met.

Even lazier loading

If you want to lazily load the component definition when the island initializes, you can do that too.

<script type="module" src="is-land.js"></script>

<is-land on:visible on:idle>
	<my-component>Fallback content.</my-component>
	<template data-island>
		<script type="module" src="my-component.js"></script>
	</template>
</is-land>

• You could add a <link rel="stylesheet" href="my-component.css"> in there too, if your component has separate styles too (any valid markup works).
• Use data-island="replace" to replace the Island’s content with the new template content.

Loading conditions

When using multiple loading conditions, all of the loading conditions for an island must be true before the island initializes.

• on:visible
• on:idle
  • using requestIdleCallback
• on:interaction
  • defaults to touchstart,click, but you can change this to any event with on:interaction="mouseenter,focusin"
• on:media
  • on:media="(min-width: 64em)" for Viewport size.
  • on:media="(prefers-reduced-motion: no-preference)" to only initialize when the user has no motion preference.
• on:save-data="false" to only initialize when the user has not requested to Save Data.

Related

Read the documentation on 11ty.dev or check out a few introductory videos below: