Till now, we have used Web Components with no HTML content inside them. That is, when we import an HTML tag for a Web Component that we created, we have never placed any other HTML tag inside it, for example:
<custom header>
<!-- no html here -->
</custom-header>
This creates a huge limitation on the Web Component that we are creating. In the <custom header> component, we failed to add dynamic links. You can argue that we can place link data in the form of attributes and then we can run a loop inside our component definition and build the links. But what if we want a button instead of links? What if we want to show user points instead of the button? So, not being able to do these things is a limitation.
In this section, we will extend our current knowledge of Web Components and use the concept of slots...
