How a Minimal Web Components Model Helps AI Coding Agents Work Effectively

A developer series on using @relax.js/core with AI coding agents explains a deliberately concise mental model for working with native Web Components. The approach relies on plain HTMLElement extension, native lifecycle methods, and customElements.define, avoiding base classes or decorators to keep the codebase grep-friendly. A key pitfall highlighted is that type-only imports cause the bundler to skip module execution, leaving custom element tags undefined at runtime. The author also clarifies that marking connectedCallback as async is silently ignored by browsers, so async work must be initiated separately and allowed to update the DOM on completion. The model avoids reactive state entirely, opting for direct DOM updates at the exact point data changes.