demo-lit.html

---
layout: layout.html
title: Lit Islands
---
<h1><a href="/">is-land</a> using <img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Flit.dev%2F/" alt="IndieWeb avatar for https://lit.dev/" width="28" height="28" decoding="async" loading="lazy"> Lit</h1>

<h2>Scroll down</h2>

<hr style="height: 100vh">

<h2>Client-rendered Lit</h2>

<p>You can use `import="./lit-component.js"` or `&lt;template data-island&gt; with &lt;script type="module"&gt;`:</p>

<is-land on:visible import="./lib/lit/lit-component-client.js">
	This is a lit component:
	<lit-component-client class="demo-component" name="World">Fallback content!</lit-web-component>
</is-land>

<is-land on:visible id="lit-test">
	This is a lit component: <lit-other-web-component class="demo-component" name="World">Fallback content!</lit-other-web-component>

	<template data-island>
		<script type="module">
		import {html, css, LitElement} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";

		customElements.define('lit-other-web-component', class extends LitElement {
			// encapsulated styles!
			static styles = css`p { color: blue; margin: 0; }`;
		
			static properties = {
				name: {type: String},
			};

			render() {
				this.classList.add("test-c-finish");
				return html`<p>Hello, ${this.name || "Stranger"}!</p>`;
			}
		});
		</script>
	</template>
</is-land>

<h2>Server-rendered Lit (SSR)</h2>
<p>In order to keep the stock example code light, this deeper integration using the <a href="https://lit.dev/blog/2022-02-07-eleventy/"><code>@lit-labs/eleventy-plugin-lit</code></a> plugin lives in the <a href="https://github.com/11ty/is-land/compare/lit-ssr?expand=1"><code>lit-ssr</code> branch</a>.</p>