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.