atomico-jsx-patterns

What problem does it solve?

This guide solves the common pitfalls and type-safety gaps when using JSX with Atomico by prescribing patterns that enable reliable prop and event inference, predictable shadow DOM and slot behavior, and maintainable component composition.

Core Features & Use Cases

• Prefer constructor instances: Use constructor component references to preserve full TypeScript prop and event type checking, support IDE autocompletion, and enable safe refactoring.
• Host and slot management: Enforce using host as the component root and apply default, named, and manual slot strategies to control light DOM composition and slot assignment.
• Styling and performance patterns: Recommend CSS variable theming, inline style patterns, staticNode for frozen subtrees, keyed lists for efficient reconciliation, and inline event handlers for stronger inference.
• Use Case: Build a typed Todo application where child components expose strongly-typed events and props and can be composed, refactored, and optimized without losing type safety.

Quick Start

Show me an Atomico example that composes a typed TodoApp using constructor component references, inline event handlers, and shadowDom with full TypeScript inference.