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 to put HTML content inside our Web Components. A slot is a placeholder for any HTML markup that can be placed inside a Web Component. A slot can have a name, and this slot can have HTML or plain text that can be used inside our component.

We will start with the Web Component that we have already worked on, <company-header>. The getTemplate() method of this component is as follows:

getTemplate() {
  return `
    <a href="/">
      <img class="icon" src="${this.getAttribute('icon')}" />
    </a>
    <h1 class="heading">${this.getAttribute('page-name')}</h1>
    <div>
      <a class="header-links" href="/home.html">Home</a>
      <a class="header-links" href="/aboutus.html">About Us</a>
    </div>
  `;
}

In the preceding code, we can see that there are two links, Home and About Us. If we want to add one more link to this, we will need to modify the definition of the Web Component, which will in turn create problems with maintaining it and we will have to create a new version of it every time we want to add a new link. 

In order to solve this problem, we will use slots. We will replace that whole div that contains the links with a slot of name other-links. Let's take a look at the code:

getTemplate() {
  return `
    <a href="/">
      <img class="icon" src="${this.getAttribute('icon')}" />
    </a>
    <h1 class="heading">${this.getAttribute('page-name')}</h1>
    <div>
      <slot name="other-links"></slot>
    </div>
  `;
}

This way, we can create a slot that can be filled when we use the Web Component:

<company-header icon="icon.png" page-name="My Page">
    <ul slot="other-links" class="header-links__container">
      <li>
        <a class="header-links" href="/home.html">Home</a>
      </li>
      <li>
        <a class="header-links" href="/aboutus.html">About Us</a>
      </li>
    </ul>
</company-header>

And here, we are filling the slot with a <ul> tag that has a slot attribute with a value other-links. You can have any HTML you want inside this slot. You can even replace it with plain text.

In a Web Component, there can be any number of slots. It totally depends on your use case. But, let us take a look at another example, where we use three slots.