Renderless Components

A renderless component is an advanced concept in Svelte that allows developers to create reusable components without rendering any HTML elements within the component itself.

This technique is particularly useful when leveraging Svelte to render on a canvas or in a 3D context, where the rendering of an HTML template by Svelte is not required. Instead, the canvas and Web Graphics Library (WebGL) offer an imperative API to produce graphics on the canvas. With the renderless component technique, it becomes possible to design components that enable users to describe the canvas declaratively, allowing the component to translate it into imperative instructions.

Another use case for a renderless component is to create components that only manage states and behaviors, leaving the parent component control over what should actually be rendered. This will come in handy when developing a component library and you want to make it easy for users to customize how your component...