In the previous chapters, we have either created Web Components from scratch or used a library to create Web Components. We even created a single-page web app using just Web Components. But what if we have an already-existing project? What if this is a monolithic frontend web application and we need a way to use a web component in this project? And what if we want to use a web component for a quick prototyped functionality without much overhead? This could save a lot of effort in both time and money.
This chapter is just for scenarios like this one; here we will look into ways in which we can use Web Components in already-existing projects.
By the way, this chapter is for advanced users.
I am assuming that you have worked on React, Angular, or Vue and that you are looking for ways to include Web Components into web applications that are already using one or more of these technologies. I am also assuming that you know how to run these web applications. However, for the sake of simplicity, we will look into the simplest component that uses one of these technologies and how two Vanilla Web Components can be included in any of these technologies.
In this chapter, we're going to see the following topics:
- Integration with already-existing projects
- Integrating Web Components in React
- Integrating Web Components in Angular
- Integrating Web Components in Vue