Introducing web components
To work with JavaScript, whether it’s bringing JavaScript to Blazor or bringing Blazor into JavaScript, we can use a technology called web components.
Web components are a set of web platform APIs that allow us to create new, custom, reusable HTML tags. They are packaged in an encapsulated way, and we can use them very similarly to how we use components in Blazor.
The really nice thing is that we can use them in any JavaScript library or framework that supports HTML.
Web components are built on top of existing web standards like shadow DOM, ES modules, HTML templates, and custom elements.
We will also recognize some of these technologies or variations of them in Blazor. Shadow DOM is the same as Blazor’s render tree, and ES modules are the type of JavaScript modules we looked at in Chapter 10, JavaScript Interop.
The technology we are going to take a look at in this chapter is custom elements.
