This is a demonstration of Svelte 5 Custom Elements to build reusable, interactive components (Custom Elements) that are host framework agnostic (once built), integrate seamlessly with
any web application and do not require a module system
(as demonstrated in this server-rendered ASP.NET MVC page).
By compiling Svelte components as browser-native Custom Elements (part of the Web Components standard), we can achieve clean encapsulation of logic and state while maintaining standards compliance
and framework independence. These calculators demonstrate the approach: each component achieves reactive state using Svelte's modern Runes syntax, automatically
updating the UI when values change—all without manual DOM manipulation or event wiring. The components work alongside Alpine.js and vanilla JavaScript without conflicts,
can optionally be styled with page-level CSS (via shadow: "none"), and require only a simple <script> tag to function. This pattern enables progressive
enhancement of existing pages with sophisticated interactivity while keeping the codebase maintainable and the architecture flexible.
A sample project demonstrating the architecture and separation of bundling per component group is maintained on GitHub
Tools pages on this site utilise Svelte 5 Custom Elements, as demonstrated in the Values and Grid Art Tool page.