Universal

Built to load any standard Web Component, regardless of origin.

---

Because ce-autoloader targets the standard Custom Elements API, it doesn't care how your component was built. You can mix and match components from React, Vue, Svelte, Lit, or Vanilla JS in the same project, without a shared build step.

The examples below are three separate components, each using a different framework's internal logic and state management, but all orchestrated by a single instance of ce-autoloader.

Loading Strategies

Fine-tune component loading for every unique use case.

---

The loading attribute defines the strategy for when a component is loaded. By default, components use the visible strategy to maximize initial performance.

Strategy	Mechanism	Description
visible (Default)	Intersection Observer	Components are downloaded and defined only when they enter the viewport. Perfect for content "below the fold" to keep initial page weight low.
click	onClick or onTouch	The module is fetched when a user clicks or touches the element. Ideal for heavy UI widgets like maps, complex editors, or modal content.
eager	Immediate activation	Downloads the module as soon as it's found in the DOM. Use this for critical "above the fold" components like navigation headers or hero sections.
*custom*	Manual/Programmatic mode	You can specify any custom string (e.g., loading="lazy-load") and trigger it manually via registry.upgrade('lazy-load').

Visible by default Click to load * custom (click) *

Custom Loaders

Tailor the loader to your specific workflow.

---

Don't want to register 250 components one by one? we got you. Wildcard Loaders allow you to customize the loader to fit your needs.

In this example, we registered a loader for nord-*. The browser sees <nord-qrcode>, and our loader is called. It fetches the Correct module from the esm CDN.

/**
 * Custom loader for the Nord Health components
 */
"nord-*": async (full_name) => {
    // 1. Extract the specific component name (e.g., 'qrcode' from 'nord-qrcode')
    const [, namespace, name] = full_name.match(/^([a-z]+)-(.*)/);

    // 2. Resolve the module URL (dynamic import)
    const module = await import(/* @vite-ignore */ `https://esm.sh/@nordhealth/components/lib/${capitalize(name)}.js`);

    // 3. Define the component if not already registered
    if (!customElements.get(full_name)) {
        customElements.define(full_name, module.default);
    }
    return module
},

Now, every time the browser sees a tag with prefix nord tag, it will automatically load the component from the esm CDN.

Animations & Transitions

Define exactly how and when components surface.

Web components should feel like a native part of the page, not an afterthought. Orchestrate how elements surface with coordinated entry patterns that eliminate layout shift and create a fluid, intentional experience from the first frame.

Every component moves through two states not-defined → defined, that you can style using CSS selectors:

:not(:defined)

Placeholder State.

The custom element is in the DOM but the browser doesn't know its behavior yet. Use this to set min-height or aspect-ratio to reserve space on the page.

A forever not-loaded element

:not(:defined)[ce="loading"]

Loading State.

Triggered when the module is being loaded. This is the perfect time to show a Skeleton Loader or a progress indicator.

A loading element

ce="defined"

Interactive State.

The component is defined and upgraded. Use this to trigger a final "fade-in" or entrance animation.

A interactive element

The CSS view transitions are supported out of the box, and you can name them using view-transition-name attribute.

This allows you to create seamless transitions between states, and make them smoothly animate to it's place

🌜 (click to load) 🌛

Native Telemetry & Insights

Performance as a Standard.

Stop guessing how your islands perform. With telemetry baked into the core, you get deep visibility into load times and execution overhead using native browser APIs—keeping your overhead near zero while your insights stay sharp.

Error Fallbacks & Resilience

Built for the Real-World Web.

---

The network is unreliable, but your UI shouldn't be.

Define a custom fallback component via fallback that is displayed when a module throws an error during loading.

Configuration

When creating a new CERegistry, you can pass an options object to customize its behavior.