### Custom Button Element with lift-html and Solid.js

Source: https://github.com/jlarky/lift-html/blob/main/README.md

This example defines a `<my-button>` custom element using `@lift-html/solid`. It integrates Solid.js's `createSignal` and `createEffect` to manage a click counter, dynamically updating the button's text. The `init` method sets up the button's initial state and event listener.

```HTML
<!-- @lift-html/solid -->
<my-button>
  <button disabled>
    Loading...
  </button>
</my-button>
<script type="module">
  import { liftSolid } from "https://esm.sh/@lift-html/solid";
  import { createEffect, createSignal } from "https://esm.sh/solid-js";
  // define a custom element
  const MyButton = liftSolid("my-button", {
    init() {
      const button = this.querySelector("button");
      if (!button) throw new Error("<my-button> must contain a <button>");
      button.disabled = false;
      const [count, setCount] = createSignal(0);
      button.onclick = () => setCount(count() + 1);
      createEffect(() => {
        button.textContent = `Clicks: ${count()}`;
      });
    },
  });
</script>
```

--------------------------------

### Run @lift-html/cli using Deno

Source: https://github.com/jlarky/lift-html/blob/main/packages/cli/README.md

Executes the @lift-html/cli tool via Deno, pointing to the specified vendor file. This command requires Deno to be installed and grants all necessary permissions (-A) for execution.

```Shell
deno run -A jsr:@lift-html/cli src/vendor/lift-html
```

--------------------------------

### Custom Button Element with lift-html Core (Vanilla JS)

Source: https://github.com/jlarky/lift-html/blob/main/README.md

This example demonstrates creating a `<my-button>` custom element using the core `@lift-html/core` library. It uses plain JavaScript to manage a click counter and update the button's text, showcasing a lightweight, no-framework approach to dynamic custom elements.

```HTML
<!-- @lift-html/core -->
<my-button>
  <button disabled>
    Loading...
  </button>
</my-button>
<script type="module">
  import { liftHtml } from "https://esm.sh/@lift-html/core";
  // define a custom element
  const MyButton = liftHtml("my-button", {
    init() {
      const button = this.querySelector("button");
      if (!button) throw new Error("<my-button> must contain a <button>");
      button.disabled = false;
      let count = 0;
      updateCount();
      button.onclick = () => {
        count++;
        updateCount();
      };

      function updateCount() {
        button.textContent = `Clicks: ${count}`;
      }
    },
  });
</script>
```

--------------------------------

### Theme Toggle Component Implementation Comparison

Source: https://github.com/jlarky/lift-html/blob/main/README.md

This snippet compares the implementation of a simple theme toggle component using both vanilla Web Component class syntax and the `lift-html` library's functional approach. Both versions achieve the same functionality of toggling dark/light mode on the document element and updating a button's ARIA state, demonstrating `lift-html`'s goal of minimal syntactic difference.

```JavaScript
class ThemeToggle extends HTMLElement {
    constructor() {
      super();
      const button = this.querySelector('button')!;
      /** Set the theme to dark/light mode. */
      const setTheme = (dark: boolean) => {
        document.documentElement.classList[dark ? 'add' : 'remove']('theme-dark');
        button.setAttribute('aria-pressed', String(dark));
      };
      // Toggle the theme when a user clicks the button.
      button.addEventListener('click', () => setTheme(!this.isDark()));
      // Initialize button state to reflect current theme.
      setTheme(this.isDark());
    }
    isDark() {
      return document.documentElement.classList.contains('theme-dark');
    }
  }
  customElements.define('theme-toggle', ThemeToggle);
```

```JavaScript
import { liftHtml } from "@lift-html/core";

  liftHtml("theme-toggle", {
    init() {
      const button = this.querySelector('button')!;
      /** Set the theme to dark/light mode. */
      const setTheme = (dark: boolean) => {
        document.documentElement.classList[dark ? 'add' : 'remove']('theme-dark');
        button.setAttribute('aria-pressed', String(dark));
      };
      // Toggle the theme when a user clicks the button.
      button.addEventListener('click', () => setTheme(!isDark()));
      // Initialize button state to reflect current theme.
      setTheme(isDark());
      function isDark() {
        return document.documentElement.classList.contains('theme-dark');
      }
    }
  });
```

--------------------------------

### SPA-style Web Component Page Structure

Source: https://github.com/jlarky/lift-html/blob/main/README.md

Illustrates a common HTML structure for a Single Page Application (SPA) built using Web Components, where a root custom element (`<my-app>`) serves as the main entry point. This approach typically relies on a JavaScript framework and imports for component definitions.

```html
<html>
  <head>
    <script src="framework.js"></script>
    <link rel="import" href="my-app.html">
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>
```

--------------------------------

### Attach Shadow DOM with liftHtml

Source: https://github.com/jlarky/lift-html/blob/main/README.md

This TypeScript snippet demonstrates how to attach a Shadow DOM to a `lift-html` component within its `init` method. It includes a check for an existing `shadowRoot` to support Hot Module Replacement (HMR) and then populates the Shadow DOM with content.

```ts
liftHtml("hello-world", {
  init() {
    // in case of HMR shadowRoot might already be attached
    const root = this.shadowRoot || this.attachShadow({ mode: "open" });
    root.innerHTML = `<h1>Hello, World!</h1>`;
  }
});
```

--------------------------------

### TypeScript Type Definition for Lift-HTML Custom Element Properties

Source: https://github.com/jlarky/lift-html/blob/main/README.md

Demonstrates how to use TypeScript with `@lift-html/core` to define type-checked properties for custom HTML elements, such as `my-card` with `variant` options. This allows for compile-time validation of component attributes without adding runtime JavaScript.

```ts
declare module "@lift-html/core" {
  interface KnownElements {
    "my-card": HTMLElement & { props: { variant: "primary" | "secondary" } };
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.