14 Advanced Svelte

 

This chapter covers

  • Form validation
  • Using CSS libraries
  • Special elements
  • Importing JSON files
  • Creating component libraries
  • Web components

This chapter will wrap up our coverage of Svelte with a collection of relatively unrelated topics. What they have in common is that they may not be needed for basic Svelte applications.

Web applications that require form input from users typically need to validate that input. There are third-party libraries for other web frameworks that assist with this. However, the form validation that is part of HTML is often sufficient and is easy to use. We will look at how to do so in a Svelte application.

CSS libraries generally provide three things. First is a set of common styles that make it easy to produce polished user interfaces. Second is help with page layout and making user interfaces responsive to a variety of screen sizes. Third is a set of reusable UI components. Examples of CSS libraries include Bootstrap, Foundation, and Material UI. We will look at how one of these libraries, Bootstrap, can be used in Svelte applications.

Svelte supports a set of elements whose names begin with svelte:. These enable functionality that is needed in a variety of special circumstances, such as rendering a component identified by an expression, listening to DOM window and body events, binding variables to DOM window properties, inserting elements into the document head element, and specifying options for the Svelte compiler.

14.1 Form validation

14.2 Using CSS libraries

14.3 Special elements

14.4 Importing JSON files

14.5 Creating component libraries

14.6 Web components

Summary