Configuration

ignite.config.ts is the single place to define renderer defaults, styles, and diagnostics.

ignite.config.ts

import { defineIgniteConfig } from 'ignite-element/config';

export default defineIgniteConfig({
  renderer: 'ignite-jsx', // or "lit"
  strategy: 'diff', // "diff" | "replace"
  styles: new URL('./styles.css', import.meta.url).href, // injected into each shadow root
  logging: 'warn', // "off" | "warn" | "debug"
});

Loading the config

• With Vite or Webpack plugins, the config is auto-imported (install and register the plugin in your bundler config).
• Without plugins, import it in your app entry so the renderer and styles are applied before you register components.

Default behavior:

• If renderer is not set, Ignite defaults to ignite-jsx.
• If you set a renderer that isn’t registered, Ignite falls back to ignite-jsx and logs a warning.

Scoped vs. global styles

The styles URL is injected into each component’s shadow root. Add additional light-DOM styles in your host app as usual.

Per-component overrides

Renderer and strategy are intended to be configured globally. Per-component overrides for render strategy are internal and not part of the public API; keep behavior discoverable in ignite.config.ts.