Let's create a Web Component called <my-article> that has three slots: author, article-heading, and article. The definition of the Web Component is as follows starting with the template:

getTemplate() {
  return `
    <h1 class="article-heading">
      <slot name="article-heading"></slot>
    </h1>
    <div class="article-author">
      <slot name="author"></slot>
    </div>
    <div class="article-content">
      <slot name="article"></slot>
    </div>
    ${this.getStyle()}
  `;
}

As you can see, there are three slots. One for heading, one for author name, and one for content. The getStyle() method looks something like this:

getStyle() {
  return `
    <style>
      :host {
        display: block;
        background: #e4f4fb;
        padding: 10px;
      }
      .article-heading {
        text-align: right;
        text-transform: lowercase;
        font-size: 50px;
        margin-bottom: 0;
      }
      .article-author {
        text-align: right;
        text-transform: lowercase;
        font-style: italic;
        font-size: 22px;
        padding-bottom: 20px;
        border-bottom: 2px solid black;
      }
      .article-content {
        line-height: 1.5;
        margin-top: 20px;
      }
      .article-content::first-letter {
        font-size: 50px;
        line-height: 0;
      }
    </style>
  `;
}

And when we try to use it, it looks something like this:

<my-article>
  <span slot="article-heading">A random article</span>
  <span slot="author">Prateek Jadhwani</span>
  <div slot="article">
    <p>This is a demo paragraph</p>
    <p>This is another demo paragraph</p>
  </div>
</my-article>

We can of course change the order of the slots while calling the <my-article> tag and it will still work as per the definition. The output will look something like this:

As you can see, we do not have to worry about the look and feel of the content, as long as the classes inside the Web Component are taking care of the styling. This also shows that it is up to the user to use any number of slots.