{"id":30770432,"url":"https://github.com/jshimkoski/custom-elements","last_synced_at":"2026-04-25T02:12:20.003Z","repository":{"id":311755442,"uuid":"1033547480","full_name":"jshimkoski/custom-elements","owner":"jshimkoski","description":"The Complete Web Components Framework. Ultra-powerful, type-safe runtime for fast, reactive, and maintainable web components.","archived":false,"fork":false,"pushed_at":"2026-04-21T11:02:31.000Z","size":3575,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-21T11:26:52.535Z","etag":null,"topics":["components-framework","custom-elements","frontend","reactive","typescript","ui","web-components"],"latest_commit_sha":null,"homepage":"https://jasonshimmy.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jshimkoski.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/security.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-07T01:51:58.000Z","updated_at":"2026-04-21T11:02:34.000Z","dependencies_parsed_at":"2026-03-10T04:01:49.513Z","dependency_job_id":null,"html_url":"https://github.com/jshimkoski/custom-elements","commit_stats":null,"previous_names":["jshimkoski/custom-elements"],"tags_count":148,"template":false,"template_full_name":null,"purl":"pkg:github/jshimkoski/custom-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshimkoski%2Fcustom-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshimkoski%2Fcustom-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshimkoski%2Fcustom-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshimkoski%2Fcustom-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jshimkoski","download_url":"https://codeload.github.com/jshimkoski/custom-elements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshimkoski%2Fcustom-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32093156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components-framework","custom-elements","frontend","reactive","typescript","ui","web-components"],"created_at":"2025-09-04T23:05:10.808Z","updated_at":"2026-04-21T13:00:44.425Z","avatar_url":"https://github.com/jshimkoski.png","language":"TypeScript","funding_links":["https://patreon.com/jshimkoski"],"categories":[],"sub_categories":[],"readme":"# 🧩 Custom Elements Runtime\n\n[![Patreon](https://img.shields.io/badge/support-patreon-orange?logo=patreon)](https://patreon.com/jshimkoski)\n\n\u003e **The Complete Web Components Framework**\n\nBuild modern components with strict TypeScript, zero dependencies, and a clean functional API. Designed for speed, standards compliance, and productivity.\n\n- Try it on [Codepen.io](https://codepen.io/jshimkoski/pen/JoYmpxm).\n- Build SPA, SSR, and SSG apps with the [CER App Framework](https://github.com/jshimkoski/vite-plugin-cer-app).\n- Check out the [Material Design 3 Components](https://github.com/jshimkoski/cer-material) built with this runtime.\n- Play a game of [Solatro](https://solatro.netlify.app) built with this runtime in 100% Web Components.\n- Learn more about the author at [jasonshimmy.com](https://jasonshimmy.com).\n\n## ✨ Why You'll Love It\n\n- ⚡ **Blazing Fast:** Minimal runtime, instant updates, zero dependencies.\n- 🎨 **JIT CSS:** On-demand, utility-first styling directly in your HTML at runtime.\n- 💪 **No Build Necessary:** Instant development feedback, no bundling required.\n- 🧑‍💻 **TypeScript First:** Strict types, intellisense, and safety everywhere.\n- 🧩 **Functional API:** No classes, no boilerplate—just pure functions.\n- 🛠️ **SSR \u0026 HMR Ready:** Universal rendering and instant hot reloads.\n- 🔌 **Extensible:** Directives, event bus, store, and more for advanced use cases.\n- 🏆 **Developer Friendly:** Clean docs, examples, and a welcoming community.\n\n## ⏱️ Getting Started\n\n1. **Install:** `npm install @jasonshimmy/custom-elements-runtime`\n2. **Create a Component:**\n\n```ts\nimport {\n  component,\n  defineModel,\n  html,\n} from '@jasonshimmy/custom-elements-runtime';\nimport { useJITCSS } from '@jasonshimmy/custom-elements-runtime/jit-css';\n\ncomponent('my-counter', () =\u003e {\n  useJITCSS();\n\n  const count = defineModel('count', 0);\n\n  const handleClick = () =\u003e {\n    count.value++;\n  };\n\n  return html`\n    \u003cbutton\n      type=\"button\"\n      class=\"px-4 py-2 bg-primary-500 text-white rounded\"\n      @click.prevent=\"${handleClick}\"\n    \u003e\n      Count: ${count.value}\n    \u003c/button\u003e\n  `;\n});\n```\n\n3. **Use in HTML:**\n\n```html\n\u003cmy-counter count=\"5\"\u003e\u003c/my-counter\u003e\n\n\u003cscript\u003e\n  const myCounter = document.querySelector('my-counter');\n  myCounter.addEventListener('update:count', (event) =\u003e {\n    myCounter.setAttribute('count', event.detail);\n    console.log('Count updated to:', event.detail);\n  });\n\u003c/script\u003e\n```\n\n4. **Enjoy instant reactivity and type safety!**\n\n## 📦 Complete API Reference\n\nBelow is the **complete list of public symbols** exported by the runtime and its named subpaths (root entry + subpath entries).\n\n### Root Entry\n\n**Package:** `@jasonshimmy/custom-elements-runtime`\n\n| Export                       | Description                                                                                                                                                                               |\n| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `component`                  | Define a custom element with the functional component API.                                                                                                                                |\n| `html`                       | Template tag function producing runtime VNodes from template literals.                                                                                                                    |\n| `css`                        | Define component-scoped/JIT styles or register stylesheets.                                                                                                                               |\n| `ref`                        | Create a reactive reference object with a `.value` property.                                                                                                                              |\n| `computed`                   | Create a memoized, derived read-only value from other reactive sources.                                                                                                                   |\n| `watch`                      | Register watchers reacting to changes in reactive values.                                                                                                                                 |\n| `watchEffect`                | Auto-track reactive reads and re-run a side-effect whenever dependencies change.                                                                                                          |\n| `nextTick`                   | Returns a Promise resolving after all pending DOM updates are flushed.                                                                                                                    |\n| `flushDOMUpdates`            | Synchronously flush all pending DOM update tasks (useful in tests).                                                                                                                       |\n| `scheduleWithPriority`       | Schedule a callback at a given `UpdatePriority` level.                                                                                                                                    |\n| `provide`                    | Store a value on the current component for descendant injection.                                                                                                                          |\n| `inject`                     | Retrieve a value provided by an ancestor component.                                                                                                                                       |\n| `createComposable`           | Package reusable stateful logic (hooks, reactive state) into a composable.                                                                                                                |\n| `getCurrentComponentContext` | Access the active component context from within a composable or render function.                                                                                                          |\n| `useProps`                   | Hook to declare/consume typed component props with defaults.                                                                                                                              |\n| `defineModel`                | Declare a two-way model binding prop; combines `useProps` + `useEmit` in one ergonomic hook.                                                                                              |\n| `useEmit`                    | Hook returning an emit function for dispatching custom events.                                                                                                                            |\n| `useOnConnected`             | Hook that runs a callback when the component connects.                                                                                                                                    |\n| `useOnDisconnected`          | Hook that runs a callback when the component disconnects.                                                                                                                                 |\n| `useOnAttributeChanged`      | Hook observing host attribute changes.                                                                                                                                                    |\n| `useOnError`                 | Hook to register a component-level error handler.                                                                                                                                         |\n| `useStyle`                   | Hook to register or compute component styles at runtime.                                                                                                                                  |\n| `useDesignTokens`            | Apply typed design token overrides to `:host` as CSS custom properties.                                                                                                                   |\n| `useGlobalStyle`             | Inject CSS into `document.adoptedStyleSheets`, escaping Shadow DOM encapsulation. Use sparingly.                                                                                          |\n| `useExpose`                  | Publish methods and properties onto the host element as an imperative public API.                                                                                                         |\n| `useSlots`                   | Inspect which named slots have been filled by the component consumer.                                                                                                                     |\n| `useTeleport`                | Render virtual DOM content into any DOM node outside the shadow root.                                                                                                                     |\n| `registerKeepAlive`          | Register `\u003ccer-keep-alive\u003e` to preserve component state across DOM removals.                                                                                                              |\n| `registerSuspense`           | Register the `\u003ccer-suspense\u003e` built-in component.                                                                                                                                         |\n| `registerErrorBoundary`      | Register the `\u003ccer-error-boundary\u003e` built-in component.                                                                                                                                   |\n| `registerBuiltinComponents`  | Register `\u003ccer-keep-alive\u003e`, `\u003ccer-suspense\u003e` and `\u003ccer-error-boundary\u003e` in one call.                                                                                                     |\n| `unsafeHTML`                 | Insert raw HTML into a template (**unsafe; use carefully**).                                                                                                                              |\n| `decodeEntities`             | Utility to decode HTML entities in strings.                                                                                                                                               |\n| `setDevMode`                 | Toggle dev-mode logging on or off at runtime.                                                                                                                                             |\n| `devLog`                     | Log a message to the console in dev mode only (no-op in production).                                                                                                                      |\n| `isReactiveState`            | Type-guard returning `true` when a value is a `ReactiveState` instance.                                                                                                                   |\n| `createHealthMonitor`        | Create a new health monitor instance (factory; each call returns an independent instance).                                                                                                |\n| `getHealthMonitor`           | Return the global singleton health monitor instance (lazily created).                                                                                                                     |\n| `updateHealthMetric`         | Update a named metric on the global singleton health monitor.                                                                                                                             |\n| `getHealthStatus`            | Return the current `HealthReport` from the global singleton health monitor.                                                                                                               |\n| `hydrateApp`                 | Trigger hydration of all DSD-rendered custom elements within a root (call after registering all components on the client).                                                                |\n| **Types**                    | `ModelRef`, `HealthMonitorInstance`, `HealthReport`, `UpdatePriority`, `TeleportHandle`, `ReactiveState`, `VNode`, `JITCSSOptions`, `DesignTokens`, `ComponentOptions`, `HydrateStrategy` |\n\n---\n\n### Directives\n\n**Package:** `@jasonshimmy/custom-elements-runtime/directives`\n\n| Export        | Description                                                        |\n| ------------- | ------------------------------------------------------------------ |\n| `when`        | Conditional rendering: render children when the condition is true. |\n| `each`        | Iterate arrays and render a VNode per item with stable keys.       |\n| `match`       | Fluent branching API (`when`/`otherwise`/`done`) returning VNodes. |\n| `anchorBlock` | Create a stable anchor VNode used as block boundaries.             |\n\n---\n\n### Directive Enhancements\n\n**Package:** `@jasonshimmy/custom-elements-runtime/directive-enhancements`\n\n| Export             | Description                                                              |\n| ------------------ | ------------------------------------------------------------------------ |\n| `unless`           | Inverse of `when` (render when condition is false).                      |\n| `whenEmpty`        | Render content when a collection is empty or null.                       |\n| `whenNotEmpty`     | Render content when a collection has items.                              |\n| `eachWhere`        | Filter + iterate; render only items matching a predicate.                |\n| `switchOnLength`   | Render different content based on array length cases.                    |\n| `eachGroup`        | Group array items by a key and render per-group content.                 |\n| `eachPage`         | Render a paginated subset (page) of items.                               |\n| `switchOnPromise`  | Render loading/success/error/idle states for async data.                 |\n| `whenMedia`        | Render content when a CSS media query matches.                           |\n| `mediaVariants`    | Map of responsive media queries (`sm`, `md`, `lg`, `xl`, `2xl`, `dark`). |\n| `responsiveOrder`  | Ordered breakpoint keys used by responsive helpers.                      |\n| `responsive`       | Per-breakpoint helpers (`sm`/`md`/`lg`/`xl`/`2xl`/`dark`).               |\n| `whenVariants`     | Compose multiple variants (e.g., `dark + lg`) into one media query.      |\n| `responsiveSwitch` | Render different content for different breakpoints.                      |\n| `switchOn`         | Fluent switch/case API matching a value to content.                      |\n\n---\n\n### Transitions\n\n**Package:** `@jasonshimmy/custom-elements-runtime/transitions`\n\n| Export                    | Description                                                                           |\n| ------------------------- | ------------------------------------------------------------------------------------- |\n| `Transition`              | Wrap content with enter/leave transition metadata consumed by the runtime.            |\n| `TransitionGroup`         | Animate lists with enter/leave/move transitions for children.                         |\n| `transitionPresets`       | Built-in transition presets (`fade`, `slide`, `scale`, etc.).                         |\n| `createTransitionPreset`  | Create a reusable transition preset programmatically.                                 |\n| `getTransitionStyleSheet` | Obtain the `CSSStyleSheet` used by the transition runtime.                            |\n| **Types**                 | `TransitionClasses`, `TransitionHooks`, `TransitionOptions`, `TransitionGroupOptions` |\n\n---\n\n### Event Bus\n\n**Package:** `@jasonshimmy/custom-elements-runtime/event-bus`\n\n| Export           | Description                                                                                                                    |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| `EventHandler`   | Type: callback signature used by the event bus.                                                                                |\n| `GlobalEventBus` | Class: singleton implementing a global pub/sub event bus.                                                                      |\n| `eventBus`       | Proxy: lazy proxy to the singleton `GlobalEventBus` instance.                                                                  |\n| `emit`           | Emit a global event with an optional payload.                                                                                  |\n| `on`             | Register a handler for a global event (returns unsubscribe function).                                                          |\n| `off`            | Remove a handler for a global event.                                                                                           |\n| `once`           | One-time listener. **Callback form** `once(name, handler)` → `void`. **Promise form** `once(name)` → `Promise\u003cT\u003e`. Do not mix. |\n| `listen`         | Listen for native `CustomEvent` on the global event bus (returns unsubscribe).                                                 |\n\n---\n\n### Store\n\n**Package:** `@jasonshimmy/custom-elements-runtime/store`\n\n| Export        | Description                                                 |\n| ------------- | ----------------------------------------------------------- |\n| `Store`       | Interface describing `subscribe` / `getState` / `setState`. |\n| `createStore` | Create a simple observable store that notifies subscribers. |\n\n---\n\n### Router\n\n**Package:** `@jasonshimmy/custom-elements-runtime/router`\n\n| Export                  | Description                                                                                                                                         |\n| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `useRouter`             | Create and use a router instance configured with routes (client \u0026 SSR).                                                                             |\n| `initRouter`            | Initialize the router and register `router-view` / `router-link`.                                                                                   |\n| `matchRoute`            | Match a path against configured routes and extract params.                                                                                          |\n| `matchRouteSSR`         | SSR-friendly wrapper for route matching. Automatically strips query strings and URL fragments before matching, so `req.url` can be passed directly. |\n| `findMatchedRoute`      | Find the first matching route entry from an array of routes (lower-level helper).                                                                   |\n| `parseQuery`            | Parse a query string into a key/value map.                                                                                                          |\n| `serializeQuery`        | Serialize a key/value map into a query string (e.g. `?a=b`).                                                                                        |\n| `normalizePathForRoute` | Normalize a path string for consistent route matching (strips trailing slashes, etc.).                                                              |\n| `DEFAULT_SCROLL_CONFIG` | Default scroll-to-fragment configuration object used by the router.                                                                                 |\n| `isDangerousScheme`     | Returns `true` for dangerous URL schemes (e.g. `javascript:`).                                                                                      |\n| `isAbsoluteUrl`         | Returns `true` when a URL string is absolute (has a protocol).                                                                                      |\n| `safeDecode`            | Decode a URI component, returning the original string on error.                                                                                     |\n| `canonicalizeBase`      | Normalize a router base path string (strips trailing slashes, ensures leading slash).                                                               |\n| `resolveRouteComponent` | Resolve/load a route's component (supports async loaders + caching).                                                                                |\n| `clearComponentCache`   | Clear the resolved route component cache (useful for testing and HMR).                                                                              |\n| `activeRouterProxy`     | Stable proxy to the currently active router; forwards subscriptions and method calls (advanced/testing use).                                        |\n| **Types**               | `Route`, `RouteState`, `RouteComponent`, `GuardResult`, `RouterLinkProps`, `RouterLinkComputed`, `RouterConfig`, `Router`                           |\n\n---\n\n### SSR\n\n**Package:** `@jasonshimmy/custom-elements-runtime/ssr`\n\n| Export                        | Description                                                                                                                                                                                                               |\n| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `renderToString`              | Render a VNode tree to HTML for server-side rendering (backwards-compatible baseline).                                                                                                                                    |\n| `renderToStringWithJITCSS`    | Render to HTML + pre-generate JIT CSS. Pass `dsd: true` for Declarative Shadow DOM output with full per-shadow-root CSS stack.                                                                                            |\n| `renderToStringWithJITCSSDSD` | **Recommended.** Convenience alias: `renderToStringWithJITCSS(vnode, { dsd: true, ... })`. Full DSD output, hydration-ready, zero FOUC. Requires a **single root VNode** — wrap multi-element templates in one container. |\n| `renderToStringDSD`           | Render to DSD HTML string (no JIT CSS pipeline). Appends DSD polyfill by default.                                                                                                                                         |\n| `renderToStream`              | Render to a `ReadableStream\u003cstring\u003e` for streaming SSR / chunked transfer encoding.                                                                                                                                       |\n| `DSD_POLYFILL_SCRIPT`         | Minified inline `\u003cscript\u003e` that implements DSD for Firefox \u003c 123. Injected automatically; export it for manual placement.                                                                                                 |\n| `registerEntityMap`           | Register a custom named-entity map for SSR `decodeEntities`.                                                                                                                                                              |\n| `loadEntityMap`               | Async loader for the full HTML5 named-entity map.                                                                                                                                                                         |\n| `clearRegisteredEntityMap`    | Reset the entity map to the built-in minimal set.                                                                                                                                                                         |\n| `VNode` (type)                | The runtime VNode shape used by renderers and SSR.                                                                                                                                                                        |\n| `RenderOptions` (type)        | Options for `renderToString` (`injectSvgNamespace`, `injectKnownNamespaces`).                                                                                                                                             |\n| `DSDRenderOptions` (type)     | Options for DSD rendering (`dsd`, `dsdPolyfill`, plus all `RenderOptions`).                                                                                                                                               |\n| `SSRJITResult` (type)         | Result of `renderToStringWithJITCSS`: `{ html, css, globalStyles, htmlWithStyles }`.                                                                                                                                      |\n\n### SSR Middleware\n\n**Package:** `@jasonshimmy/custom-elements-runtime/ssr-middleware`\n\nFramework-agnostic handler factories for Express, Fastify, Hono, and raw Node.js.\n\n| Export                        | Description                                                                                               |\n| ----------------------------- | --------------------------------------------------------------------------------------------------------- |\n| `createSSRHandler`            | Returns an `async (req, res)` handler that SSR-renders a VNode and sends the full HTML document response. |\n| `createStreamingSSRHandler`   | Returns an `async (req, res)` handler that streams the rendered HTML using chunked transfer encoding.     |\n| `MinimalRequest` (type)       | Minimal `{ url?, method?, headers? }` interface compatible with all major Node.js HTTP frameworks.        |\n| `MinimalResponse` (type)      | Minimal `{ setHeader, write?, end }` interface compatible with all major Node.js HTTP frameworks.         |\n| `SSRMiddlewareOptions` (type) | Options for `createSSRHandler` and `createStreamingSSRHandler`.                                           |\n\n### Global Styles (CSS)\n\n**Package:** `@jasonshimmy/custom-elements-runtime/css` or `@jasonshimmy/custom-elements-runtime/css/style.css`\n\n| Export      | Description                                              |\n| ----------- | -------------------------------------------------------- |\n| `style.css` | CSS export that contains CSS variables and a base reset. |\n\n### Variables (CSS)\n\n**Package:** `@jasonshimmy/custom-elements-runtime/css/variables.css`\n\n| Export          | Description                                                   |\n| --------------- | ------------------------------------------------------------- |\n| `variables.css` | CSS export that contains design tokens (colors, fonts, etc.). |\n\n### Reset (CSS)\n\n**Package:** `@jasonshimmy/custom-elements-runtime/css/reset.css`\n\n| Export      | Description                                       |\n| ----------- | ------------------------------------------------- |\n| `reset.css` | CSS export that contains a base reset for styles. |\n\n### Extended Color Palette (TypeScript)\n\n**Package:** `@jasonshimmy/custom-elements-runtime/css/colors`\n\nOpt-in extended color palette with full Tailwind-compatible color names (`slate`, `gray`, `zinc`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`) with shades 50–950.\n\n```ts\nimport { extendedColors } from '@jasonshimmy/custom-elements-runtime/css/colors';\n\n// Use individual color scales\nconst blueShades = extendedColors.blue; // { '50': '#eff6ff', '100': '...', ... }\n\n// Use in a component\ncomponent('branded-card', () =\u003e {\n  useStyle(\n    () =\u003e css`\n      :host {\n        --card-accent: ${extendedColors.violet['500']};\n      }\n    `,\n  );\n  return html`\u003cslot\u003e\u003c/slot\u003e`;\n});\n```\n\n| Export           | Description                                                                            |\n| ---------------- | -------------------------------------------------------------------------------------- |\n| `extendedColors` | Full extended palette — `Record\u003cstring, Record\u003cstring, string\u003e\u003e` (name → shade → hex). |\n| `ColorScale`     | Type: single color scale with shade keys `50`–`950`.                                   |\n\n---\n\n### JIT CSS Engine\n\n**Package:** `@jasonshimmy/custom-elements-runtime/jit-css`\n\nOpt-in JIT CSS engine with hooks, global control, and the `cls()` helper for IDE tooling.\n\n| Export                   | Description                                                                                                         |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------- |\n| `useJITCSS`              | Enable JIT CSS for the current component (per-component opt-in). Pass `JITCSSOptions` to configure colors/variants. |\n| `useDesignTokens`        | Apply typed design token overrides to `:host` as CSS custom properties.                                             |\n| `useGlobalStyle`         | Inject CSS into `document.adoptedStyleSheets`, escaping Shadow DOM encapsulation.                                   |\n| `enableJITCSS`           | Enable JIT CSS globally for all components.                                                                         |\n| `disableJITCSS`          | Disable JIT CSS globally.                                                                                           |\n| `isJITCSSEnabled`        | Returns `true` when JIT CSS is globally active.                                                                     |\n| `isJITCSSEnabledFor`     | Returns `true` when JIT CSS is active for a specific `ShadowRoot`.                                                  |\n| `jitCSS`                 | Generate CSS from an HTML string (low-level engine).                                                                |\n| `extractClassesFromHTML` | Extract unique class names from an HTML string.                                                                     |\n| `cls`                    | Identity function that signals JIT class names to IDE tooling and static scanners (no-op at runtime).               |\n| `parseColorClass`        | Parse a color utility class name to its CSS declaration.                                                            |\n| `parseColorWithOpacity`  | Parse a color class with an optional `/opacity` modifier into its CSS declaration.                                  |\n| `parseGradientColorStop` | Parse a gradient color stop utility (`from-*`, `via-*`, `to-*`) to its CSS declaration.                             |\n| `parseSpacing`           | Parse a spacing utility class name to its CSS declaration.                                                          |\n| `parseArbitrary`         | Parse an arbitrary value utility class name.                                                                        |\n| `utilityMap`             | Complete mapping of all static utility class names to their CSS declarations.                                       |\n| `selectorVariants`       | State and pseudo-class variant selector map (`hover:`, `focus:`, `disabled:`, `inert:`, etc.).                      |\n| `mediaVariants`          | Responsive breakpoint media query map (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`, `dark:`).                                |\n| `containerVariants`      | Container query breakpoint map (`@sm:`, `@md:`, `@lg:`, `@xl:`, `@2xl:`).                                           |\n| `colors`                 | Semantic color palette object (`neutral`, `primary`, `secondary`, `success`, `info`, `warning`, `error`).           |\n| **Types**                | `JITCSSOptions`, `DesignTokens`                                                                                     |\n\n---\n\n### DOM JIT CSS\n\n**Package:** `@jasonshimmy/custom-elements-runtime/dom-jit-css`\n\nRuntime DOM scanner for non-Shadow DOM contexts (React, Svelte, Vue, plain HTML).\n\n```ts\nimport { createDOMJITCSS } from '@jasonshimmy/custom-elements-runtime/dom-jit-css';\n\nconst jit = createDOMJITCSS({ extendedColors: true });\njit.mount(); // start watching\njit.destroy(); // tear down\n```\n\n| Export            | Description                                                                                         |\n| ----------------- | --------------------------------------------------------------------------------------------------- |\n| `createDOMJITCSS` | Create a DOM JIT CSS instance that watches class changes and injects utility CSS into the document. |\n| **Types**         | `DOMJITCSSOptions`, `DOMJITCSSHandle`                                                               |\n\n---\n\n### Vite Plugin\n\n**Package:** `@jasonshimmy/custom-elements-runtime/vite-plugin`\n\nBuild-time plugins for JIT CSS, SSR config, and per-page component code splitting. Three exports are available:\n\n- **`cerPlugin`** — All-in-one: JIT CSS + SSR configuration. Recommended for SSR apps.\n- **`cerJITCSS`** — JIT CSS only.\n- **`cerComponentImports`** — Per-page component code splitting: injects static `import` statements for custom elements used in `html\\`` templates so Rollup can chunk components per page.\n\n```ts\n// vite.config.ts — SSR app (recommended)\nimport { cerPlugin } from '@jasonshimmy/custom-elements-runtime/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    cerPlugin({\n      content: ['./src/**/*.{ts,tsx,html}'],\n      ssr: { dsd: true, jit: { extendedColors: true } },\n    }),\n  ],\n});\n```\n\n```ts\n// vite.config.ts — JIT CSS only\nimport { cerJITCSS } from '@jasonshimmy/custom-elements-runtime/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    cerJITCSS({\n      content: ['./src/**/*.{ts,tsx,html}'],\n      output: 'src/generated-jit.css',\n      extendedColors: true,\n    }),\n  ],\n});\n```\n\n```ts\n// vite.config.ts — per-page component code splitting\nimport { cerComponentImports } from '@jasonshimmy/custom-elements-runtime/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    cerComponentImports({\n      componentsDir: '/absolute/path/to/app/components',\n      appRoot: '/absolute/path/to/app',\n    }),\n  ],\n});\n```\n\n| Export                          | Description                                                                                                  |\n| ------------------------------- | ------------------------------------------------------------------------------------------------------------ |\n| `cerPlugin`                     | Combined plugin: JIT CSS + SSR config (`virtual:cer-ssr-config`). Returns a `Plugin[]` array.                |\n| `cerJITCSS`                     | JIT CSS-only Vite plugin that scans source files at build time and emits pre-generated CSS.                  |\n| `cerComponentImports`           | Transform plugin that injects per-file static imports for custom elements, enabling per-page code splitting. |\n| `resolveTagName`                | Normalize a component name to its kebab-case custom-element tag name (prefixes with `cer-` if no hyphen).    |\n| `extractTemplateTagNames`       | Extract hyphenated custom-element tag names from a source string's `html\\`` templates.                       |\n| `extractComponentRegistrations` | Extract resolved tag names from all `component('name', …)` calls in a source string.                         |\n| **Types**                       | `CerPluginOptions`, `CerSSROptions`, `CerJITCSSPluginOptions`, `CerComponentImportsOptions`                  |\n\n---\n\n## 📖 Documentation Index\n\nExplore the complete documentation for every runtime feature:\n\n### 🚀 **Getting Started**\n\n- [**🎯 Functional API**](./docs/functional-api.md) - **Start here!** Complete guide to the modern functional component API\n\n### 🏗️ **Core Features**\n\n- [🧩 Template](./docs/template.md) - Template syntax and html function\n- [🧭 Directives](./docs/directives.md) - Conditional rendering with `when`, `each`, and `match`\n- [🛠️ Directive Enhancements](./docs/directive-enhancements.md) - Advanced directive utilities:\n  - `unless` - Inverse of `when`\n  - `whenEmpty` / `whenNotEmpty` - Collection checks\n  - `eachWhere` - Filtered iteration\n  - `switchOnLength` - Render based on array length\n  - `eachGroup` - Group and render items\n  - `eachPage` - Pagination support\n  - `switchOnPromise` - Async state rendering\n  - `whenMedia` - Media query responsive rendering\n  - `responsive` - Responsive utilities\n- [🔗 Bindings](./docs/bindings.md) - Data binding with `:prop`, `@event`, `:model`, `:class`, `:style`\n- [🔔 Events Deep Dive](./docs/events-deep-dive.md) - Custom event emission and handling patterns\n- [🎬 Transitions Guide](./docs/transitions.md) - Animation and transition effects\n\n### 🎨 **Styling**\n\n- [🎨 JIT CSS](./docs/jit-css.md) - On-demand utility-first styling system (opt-in architecture, all utilities, `useJITCSS`, `useDesignTokens`, `useGlobalStyle`, `cls`)\n- [⚡ DOM JIT CSS](./docs/dom-jit-css.md) - Runtime DOM scanner for non-Shadow DOM contexts (React, Svelte, Vue, plain HTML)\n- [🔧 Vite Plugin](./docs/vite-plugin.md) - `cerPlugin` (JIT CSS + SSR config), `cerJITCSS` (JIT CSS only), and `cerComponentImports` (per-page code splitting) build-time plugins\n- [🔌 cerComponentImports](./docs/vite-plugin-component-imports.md) - Per-page component code splitting: auto-inject imports from `html\\`` templates\n- [📏 Space Utilities](./docs/space-utilities.md) - Tailwind-style `space-x-*` and `space-y-*` spacing utilities\n- [📝 Prose Typography](./docs/prose.md) - Beautiful typography for long-form content\n- [🎨 Colors](./docs/colors.md) - Extended Tailwind-compatible color palette (`/css/colors` subpath)\n\n### 🔗 **Communication \u0026 State**\n\n- [📢 Event Bus](./docs/event-bus.md) - Global event system for cross-component communication\n- [🗄️ Store](./docs/store.md) - Global state management\n- [🚦 Router](./docs/router.md) - Client-side routing\n- [🤝 Cross-Component Communication](./docs/cross-component-communication.md) - Patterns for component interaction\n\n### ⚡ **Advanced Features**\n\n- [⚡ Reactive API](./docs/reactive-api.md) - `watch()` targeted watchers, `computed()` memoization, `watchEffect()` auto-tracking, and `nextTick()`\n- [🏝️ Provide / Inject](./docs/provide-inject.md) - Ancestor-to-descendant dependency injection without prop-drilling\n- [🧩 Composables](./docs/composable.md) - Reusable stateful logic with `createComposable()`\n- [🚀 Teleport](./docs/teleport.md) - Render content outside the shadow root with `useTeleport()`\n- [♻️ Keep-Alive](./docs/keep-alive.md) - Preserve component state across DOM removals with `\u003ccer-keep-alive\u003e`\n- [🩺 Health Monitor](./docs/health-monitor.md) - Track runtime metrics and receive periodic health reports with `createHealthMonitor()`\n- [🔮 Virtual DOM](./docs/virtual-dom.md) - VDOM implementation and performance details\n- [🌐 SSR](./docs/ssr.md) - Complete SSR guide: Declarative Shadow DOM output, hydration, streaming, partial hydration (island architecture), `useStyle` in SSR, routing with SSR, and framework integration\n- [🌐 SSR Middleware](./docs/ssr-middleware.md) - `createSSRHandler` and `createStreamingSSRHandler` for Express, Fastify, Hono, raw Node.js, and router integration\n- [♻️ HMR](./docs/hmr.md) - Hot module replacement\n- [🛡️ Infinite Loop Protection](./docs/infinite-loop-protection.md) - Runtime safeguards against infinite loops\n- [🔒 Secure Expression Evaluator](./docs/secure-expression-evaluator.md) - Safe evaluation of dynamic expressions in templates\n\n### 🔧 **Integration Guides**\n\n- [⚛️ React Integration](./docs/react-integration.md) - Using components in React apps\n- [🦊 Vue Integration](./docs/vue-integration.md) - Using components in Vue apps\n- [🅰️ Angular Integration](./docs/angular-integration.md) - Using components in Angular apps\n- [🔥 Svelte Integration](./docs/svelte-integration.md) - Using components in Svelte apps\n\n### 🛡️ **Security \u0026 Quality**\n\n- [🔒 Security](./docs/security.md) - XSS prevention, `unsafeHTML`, CSP guidance, and safe input handling\n- [🧪 Testing](./docs/testing.md) - Testing components with Vitest + happy-dom, reactive state, events, and async components\n- [⚡ Performance](./docs/performance.md) - Update scheduler, `computed` memoization, avoiding re-renders, profiling\n- [🔧 Troubleshooting](./docs/troubleshooting.md) - Common issues and solutions\n\n### 🔄 **Upgrading**\n\n- [📦 Migration Guide](./docs/migration.md) - Upgrade instructions, including the v3.0 JIT CSS opt-in change\n\n### 📖 **Reference**\n\n- [📚 Glossary](./docs/glossary.md) - Definitions for library-specific and web-components terms\n\nFor examples and implementation details, explore the source code in `src/lib/`.\n\n## 🧑‍🔬 Real-World Examples\n\n- [Form Input \u0026 Validation](./src/components/examples/FormInputValidation.ts)\n- [Minimal Example](./src/components/examples/MinimalExample.ts)\n- [Shopping Cart](./src/components/examples/ShoppingCart.ts)\n- [Todo App](./src/components/examples/TodoApp.ts)\n\n## 🌟 Showcase \u0026 Community\n\n- **Showcase your components!** Open a PR to add your project to our gallery.\n- **Questions or ideas?** [Start a discussion](https://github.com/jasonshimmy/custom-elements-runtime/discussions) or [open an issue](https://github.com/jasonshimmy/custom-elements-runtime/issues).\n- **Contribute:** We welcome PRs for docs, features, and examples.\n- ❤️ Like what you see? [Support ongoing development on Patreon](https://patreon.com/jshimkoski)\n\n### Community Gallery\n\n- [CER App Framework](https://github.com/jshimkoski/cer-app-framework) allows you to SPA, SSR, and SSG apps with this runtime.\n- [Material Design 3 Components](https://github.com/jshimkoski/cer-material) built with this runtime.\n- [Solatro](https://solatro.netlify.app) is a RTS card-based game built with this runtime.\n\n## 💖 Support This Project\n\nCustom Elements Runtime is a labor of love built to make modern web development faster and more expressive. If it's helping you build better components, [learn more about me](https://jasonshimmy.com) or consider [supporting me on Patreon](https://patreon.com/jshimkoski) to help keep the momentum going.\n\nYour support helps fund continued development, documentation, and community engagement. Every bit helps—thank you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjshimkoski%2Fcustom-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjshimkoski%2Fcustom-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjshimkoski%2Fcustom-elements/lists"}