What are renderless components?

A renderless component, as its name implies, is a type of component that does not render any HTML elements of its own.

You might wonder, what’s the purpose of a component that doesn’t render anything?

Well, despite not rendering HTML, there are still several useful things that a component can do, including the following:

• Accepting props, processing their values, and triggering side effects as their values change: Even though the prop values are not used directly in the template, they are still reactive. You can write reactive statements with props in the component and have them run whenever the prop values change. You can see this in the following example code snippet:

  <script>
    export let title;
    export let description;
    $: document.title = `${title} - ${description}`;
  </script>

  Even though the title and description props are not used in the template, both title and description are...