Alpine JS Components

Explicit examples for all key behaviors: template mode, URL mode, dynamic sources, slots, style targeting, lifecycle events, and failure paths.

Tailwind CSS + Shadow DOM: classes inside component templates may not be generated automatically by browser Tailwind CSS CDN. There's a hidden block that safelists utility classes used by template content.

1. Base (Template)

Render from an on-page template.

2. Base (URL)

Render from a URL template.

3. Dynamic (Template/URL)

Dynamically switch between components.

Template

URL

4. Slots (Default + Named)

Inject default and named slot content from the host element.

5. Lifecycle Events

Listen to loading, loaded, and error events from URL rendering.

Bust Cache

Toggle the "Bust Cache" option to force reloads by appending a timestamp query parameter. Doing so will ignore cached templates and trigger loading and loaded events on each click.

Not seeing the loading state? Try opening the Network tab of your browser's developer tools and throttling the network speed to "Slow 3G."

Status:

6. Named Stylesheet Target

Apply only a specific stylesheet title with x-component-styles.

7. Failure Paths

Missing templates and bad URLs fail gracefully without breaking the page.

Nothing here? Good, that means the component failed to load but did so gracefully without breaking the page.

Or we could listen for an error event and display the message if we wanted to.