Skip to content

README.md

Latest commit

 

History

History
56 lines (36 loc) · 2.17 KB

README.md

File metadata and controls

56 lines (36 loc) · 2.17 KB
Raw

Styling Strategies

Ignite-element supports multiple styling approaches so you can match the needs of each component library:

Global Styles (Shadow DOM)

Use setGlobalStyles(href) to load a stylesheet once and reuse it across every component instance. These styles are applied to each component’s shadow root; they do not affect the page’s light DOM (e.g. body).

import { setGlobalStyles } from "ignite-element";

const href = new URL("./styles.css", import.meta.url).href;
setGlobalStyles(href);

Centralised Configuration (shadow scope)

Create an ignite.config.ts file and register it with defineIgniteConfig to configure global styles (and future defaults) once per application. The helpers automatically call setGlobalStyles under the hood.

// ignite.config.ts
import { defineIgniteConfig } from "ignite-element";

export default defineIgniteConfig({
  styles: new URL("./styles.css", import.meta.url).href, // formerly globalStyles
});

Import this module once in your entry file or rely on the provided bundler plugins to inject it automatically.

Light-DOM (page) styles

For app-level styling (backgrounds, layout, typography), import a stylesheet in your entry file or include a <link> in index.html. The styles setting is intentionally scoped to components; keep page shell styles separate or reuse the same file in both places if desired.

Scoped Styles

Add <style> or <link> nodes inside your render function when you need per-component CSS. The MobX example demonstrates linking an additional stylesheet for a single component.

Dynamic Styles

Because renderers receive fully derived façade data, you can compute inline styles based on state:

/** @jsxImportSource ignite-element/jsx */
({ count }) => (
  <div style={{ opacity: (count + 1) / 10 }} />
)

Roadmap

  • Global style helper (setGlobalStyles).
  • Centralised configuration file (ignite.config.ts) for global defaults.
  • Document Ignite JSX renderer styling conventions and best practices.

Refer back to README.md for a quick summary and to the state-library examples for end-to-end implementations.