Introducing Web Components
Working with JavaScript, whether it’s bringing in JavaScript to Blazor or bringing Blazor into JavaScript is using a technology called Web Components.
Web components are a set of web platform APIs which allow us to create new custom, reusable HTML tags. They are packaged in an encapsulated way and we can use them very similar 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 is built on top of existing web standards like Shadow DOM, ES Modules, HTML Templates, and Custom Elements.
We will recognize some of these technologies or at least variations of them in Blazor as well.
Shadow DOM is the same as Blazor’s Render tree, ES modules are the type of JavaScipt modules we did in Chapter 10: Making JavaScript Interop.
The technology we are going to take a look at in this chapter is Custom elements.