10 Using in SPAs
This chapter covers
- How to use web components in popular web frameworks including Angular, React, Solid, Svelte, and Vue.
- Simplifying the demo web components and the app with the wrec library
For some developers, implementing a web app without using a web framework is living the dream. For details on how to do it, see the Manning book "Vanilla Web" by Maximiliano Firtman.
In the real world, web applications often do use a web framework. To use web components in these applications, you need to know how to enable them in your chosen web framework. This chapter shows you how.
While we can’t cover how to use web components in every web framework, we can show how to use them in the most popular ones.
Note
The website Custom Elements Everywhere summarizes results from testing the use of web components across many web frameworks. All of the web frameworks listed above pass 100% of the tests.
Before jumping into each of the frameworks, let’s first look at the web components we’ll be using.
10.1 Web components tested
The examples in this chapter all use variations of the web components hello-world and radio-group, which are implemented as vanilla web components, as described in chapter 3. These web components represent two levels of complexity, hello-world being a very simple component, and radio-group being a bit more involved. Each app we build will use a radio-group to select a color and the selected color will be used by the hello-world component.